标签：vue 方式 表格 excel 导出 blob data

参考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字段在这里面存着

标签：vue,方式,表格,excel,导出,blob,data
来源： https://www.cnblogs.com/lsc-boke/p/16082245.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。