vue 导出blob方式-3种方式

参考https://zhuanlan.zhihu.com/p/350069246

问题描述

我们日常做项目，特别是后台管理系统，常常需要导出excel文件。实现方式有三种

方式一（后端处理）

后端直接返回一个excel表格地址，前端点击下载即可。不过这种方式，会导致后端的excel越存越多，造成冗余。不过如果是固定模板表格内容不会变得情况下，这种方式还是不错的。当然解决方案就是后端写一个定时器，每隔一段时间清理一次

看情况使用，如果是固定的表格，一两年都不更换的excel表格用这种方式倒是也可以的。后端固定写死只把这个固定的表格传递给前端，这样的话，也能用

方式二（后端处理）

后端返回一个blob流文件，这样的话，是一次性的流文件，使用一次就没了，就不会造成后端excel越存越多。这种方式挺好

目前这种方式使用的会稍微多一些点

方式三（前端处理）

前端保存需要导出的表格内容，然后下载并使用excel插件轮子，就可以导出了。不过众所周知，前端只是拿到数据，并展示数据的。如果表格内容比较多，或者用户对于前端速度有要求的话，或者主管老大不希望我们在项目中下载安装太多的轮子从而导致最终打包文件过大的话，这种方式就不太好

不太推荐

流文件导出步骤

流文件导出注意事项

需要加responseType: 'blob'，否则文件会损坏

 /**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
 export function getFile(url, params) {
   return new Promise((resolve, reject) => {
     axios({
       method: 'get',
       url,
       params,
       headers: {
         'Content-Type': 'application/json; application/octet-stream'
       },
       responseType: 'blob',
       timeout: 100000
     }).then((res) => {
       resolve(res)
     }).catch(err => {
       reject(err.data)
     })
   })
 }

//blob流导出-content-disposition文件名
export function downExcel(data) {
    let headers = data.headers;
    let fileName = headers["content-disposition"];
    let decd = decodeURIComponent(
      fileName.substring(20, fileName.length - 5)
    );
    const blob = new Blob([data.data]);
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `${decd}.xlsx`;
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

content-disposition 后台把动态的excel字段在这里面存着