vue(二) vue中使用blob下载文件

左手的ㄟ右手 2021-11-10 07:50 616阅读 0赞

### 1.post请求上传后对后端解析文件，然后下载 ###

uploadSectionFile(param) {
          const self = this;
          //formData 为upload必须对象，默认接收的对象值
          //eslint-disable-next-line
          const formData = new FormData();
          formData.append('file', param.file);
          axios
            .post(self.uploadAction, formData, {
              responseType: 'blob',
              headers: {
                   'data-type': 'Buffer',
                   'Content-Type': 'multipart/form-data'
                        }
            })
            .then(res => {
              
              if (res) {
                //eslint-disable-next-line
                const blob = new Blob([res.data]);
                //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
                //IE10以上支持blob但是依然不支持download
                if ('download' in document.createElement('a')) { 
               //支持a标签download的浏览器
                const link = document.createElement('a')//创建a标签
                  link.download = fileName//a标签添加属性
                  link.style.display = 'none'
                  link.href = URL.createObjectURL(blob)
                  document.body.appendChild(link)
                  link.click()//执行下载
                  URL.revokeObjectURL(link.href) //释放url
                  document.body.removeChild(link)//释放标签
              
               }else{
                   navigator.msSaveBlob(blob, fileName)
              }
              } else {
                self.$message.warning('转化word文件失败，请检查文件并且重试！');
              }
             
            })
            .catch((err) => {
            
             //err
            });
        },

### 2.get方式下载 ###

axios
            .get(requesturl, {
              responseType: 'blob',//必填
              headers: self.header//你的头部信息，可选
            })
            .then(res => {
              
              if (res) {
                //eslint-disable-next-line
                const blob = new Blob([res.data]);
                //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
                //IE10以上支持blob但是依然不支持download
                if ('download' in document.createElement('a')) { 
               //支持a标签download的浏览器
                const link = document.createElement('a')//创建a标签
                  link.download = fileName//a标签添加属性
                  link.style.display = 'none'
                  link.href = URL.createObjectURL(blob)
                  document.body.appendChild(link)
                  link.click()//执行下载
                  URL.revokeObjectURL(link.href) //释放url
                  document.body.removeChild(link)//释放标签
              
               }else{
                   navigator.msSaveBlob(blob, fileName)
              }
              }
            })
            .catch((err) => {
              //err 
            });

### 3.纯post请求下载文件 ###

downloadFile(param) {
          const self = this;
         
         axios({
                   method: 'post',
                    url: url + '?v=' + Math.random(),
                    responseType: 'blob',
                    headers: {
                        'Content-Type': 'application/json',
                        'data-type': 'Buffer'
                    },
                    data: JSON.stringify(param)
                })
            .then(res => {
              
              if (res) {
                //eslint-disable-next-line
                const blob = new Blob([res.data]);
                //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
                //IE10以上支持blob但是依然不支持download
                if ('download' in document.createElement('a')) { 
               //支持a标签download的浏览器
                const link = document.createElement('a')//创建a标签
                  link.download = fileName//a标签添加属性
                  link.style.display = 'none'
                  link.href = URL.createObjectURL(blob)
                  document.body.appendChild(link)
                  link.click()//执行下载
                  URL.revokeObjectURL(link.href) //释放url
                  document.body.removeChild(link)//释放标签
              
               }else{
                   navigator.msSaveBlob(blob, fileName)
              }
              } else {
                self.$message.warning('转化word文件失败，请检查文件并且重试！');
              }
             
            })
            .catch((err) => {
            
             //err
            });
        },

### 4.出现的问题以及解决办法 ###

如图，设置responseType: 'blob'后，获取的response仍然为默认的json串,并且下载出来的文件会乱码。

![https://img.mukewang.com/5cac58230001cc3803710210.jpg][https_img.mukewang.com_5cac58230001cc3803710210.jpg]

原因：

我这边发现的原因是：mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码

解决：

去掉mockjs模块，以及相关的调用

[https_img.mukewang.com_5cac58230001cc3803710210.jpg]: /images/20211109/8fb3e2b3756a4e939a8963cc7e2971ea.png