前端表格导出为excel方法合集

前端表格导出为excel方法合集

近来遇到了前端表格保存为excel的需求，通过查阅多方资料，总结了3种方法，下面一一进行展示，有不正确的地方，望指正。主要包括两种导出方法——纯前端导出和前端接收后端blob文件流导出。

前端接收后端blob文件流导出

本文采用Vue框架和axios请求，简单发送一个get请求，然后导出为excel文件，代码如下：

//excel导出请求函数
excelRequest(){
   
   return this.axios({
   
       url:'后端数据请求地址',
       method: 'get'，
       responseType: 'blob', //必须设置为blod，不然不能保存
     })
   },
 //excel导出功能
        exportExcel(){
   
          this.excelRequest().then(res =>{
   
            const blob = new Blob([res.data]);
            const fileName = 'Excel导出功能模板.xlsx';
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          })
        }

以上方法参考https://blog.csdn.net/zqqyaa/article/details/85617232

纯前端导出excel

导出html中的表格元素

这种方法导出的excel文件只能导出xls文件，虽然也能打开，提示文件损坏，其实质原理是导出html元素。这种方法没有深入的研究，有兴趣的，可以自行了解下。

通过blob.js和Export2Excel.js导出

这两个js文件可以网上自行下载。可根据自己的需求Export2Excel.js中修改代码，设置导出的Excel样式。
第一步、安装依赖包
npm install -S file-saver xlsx
npm install -S xlsx
npm install -D script-loader
cnpm install --save xlsx-style
第二步、将下载好的blod.js和Export2Excel.js文件放在项目中新建一个文件夹中
第三步、全局引入上面的两个文件，我这里是放在src目录下的excel文件夹下，在main.js文件中引入

import Blob from '@/excel/Blob.js'
import Export2Excel from '@/excel/Export2Excel.js'

第四步、修改配置文件，build–>webpack.base.conf.js
resolve对象中的alias对象中添加路径

'excel': path.resolve(__dirname, '../src/excel')

使用xlsx-style的过程中会出现未发现模块的问题，将在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;
这种方法在本地运行还可以，在服务器端运行可能会出问题，网上有建议自己将修改后的xlsx-style做一个npm包，然后在项目中引入，本人知识能力有限，暂时还没有尝试。

第五步、在需要导出的地方，添加方法。

exportExcel(handleLabel){
   
          var _this = this;
          this.downLoadLable