Vue 实现文件的下载

Posted 2020-11-10 胖胖的妖怪

　　上次说了，实现文件的上传需要三步，那么实现文件的下载呢？

　　答：也是三步

　　第一步：获取文件的 fileId (或者别的什么的，总之应该是代表这个文件的东西)，各家后台需要的都不一样

　　第二步：调用接口

　　　　this.$http({

　　　　　　url:this.HOST + api.download,

　　　　　　method:‘post‘,

　　　　　　params:{

　　　　　　　　fileId:fileId //此处上传第一步获取到的 fileid

　　　　　　},

　　　　　　responseType:‘arraybuffer‘ //此处注意请求头

　　　　　　}).then(function(res){

　　　　　　　　var this = that

　　　　　　　　var fileName = that.files.name //此处获取文件名称

　　　　　　　　that.download(res.data,fileName) //此处跳转到第三步

　　　　　　})

　　

　　第三步：处理返回值，并下载

　　　　　　

　　　　download (data,fileName) {

　　　　　　if (!data) {

　　　　　　　　return

　　　　　　}

　　　　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接

　　　　　　let link = document.createElement(‘a‘) //创建a标签

　　　　　　link.style.display = ‘none‘  //将a标签隐藏

　　　　　　link.href = url  //给a标签添加下载链接

　　　　　　link.setAttribute(‘download‘, fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白

　　　　　　document.body.appendChild(link)  

　　　　　　link.click()  //执行a标签

　　　　　　}