vue接收后端返回的File(Excel),excel损坏,解决

后台返回一个File类型的数据给前端。

前端请求的时候

1、设置返回类型responseType,不管你用post\get\ect都要设置

2、使用blob类型接收

3、销毁URL对象

this.$axios.post(this.$api.getThesisExcel(),paper,{
            responseType: 'blob',//设置返回类型
          }).then((res)=>{
            const link=document.createElement('a');
            try {
              let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
              let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名,中文无法解析的时候会显示 _(下划线)
              link.style.display='none';
              // 兼容不同浏览器的URL对象
              const url = window.URL || window.webkitURL || window.moxURL;
              
              link.href=url.createObjectURL(blob);
              link.setAttribute('download'_fileName.substring(_fileName.lastIndexOf('_')+1)));
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              url.revokeObjectURL(link.href);//销毁url对象
            }catch (e) {
              console.log('下载的文件出错',e)
            }

          }).catch((err)=>{
           console.log('请求出错',err.response.data.error);
          })

另外,我发现npm run build之后,前端的获取到的请求头是这样的

但浏览器获取到的是完整的。

所以后端的接口中要设置headers下面的属性

Access-Control-Expose-Headers: Content-Disposition

 

 

你可能感兴趣的:(Vue.js,javascript)