前端表格导出为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 = handleLabel;require.ensure([],()=>{const {export_json_to_excel} = require('@/excel/Export2Excel');//找到文件的绝对路径var multiHeader = [];//多级表头var list = [];//数据var title='';//下载时的文件名if(_this.downLoadLable === 'basic'){multiHeader = [['规上工业企业综合情况分析报告——基本指标','','','','','','','','','']];//元素个数必须与tHeader相同，用''来填满list = _this.tableBasicData;title = '规上工业企业综合情况分析报告——基本指标';}const  tHeader = ['指标','年份','王店镇','高照街道','洪合镇','王江泾镇','新城街道','新塍镇','油车港镇','全区']//表头const filterVal = ['indicator','year','wangDian','gaoZhao','hongHe','wangJiangJing','xinChengJD','xinCheng','youCheG','all']//表头所对应数据中的属性值const data = _this.formatJson(filterVal, list);//得到需要被合并的单元格的位置，s代表起始位置，e代表终止位置，r代表行号，c代表列号var merges = [{s:{r:0,c:0},e:{r:0,c:9}}];//表示第一行的前10列合并for(let i=0;i< (list.length / list[0].rowcount); i++){let merge = {s:{r:2+i*list[0].rowcount ,c:0},e:{r:2+(i+1)*list[0].rowcount - 1,c:0}};merges.push(merge);}export_json_to_excel(multiHeader,tHeader, data, title,merges);})},formatJson(filterVal, jsonData){return jsonData.map(v => filterVal.map(j => v[j]))},

这里multiHeader,merges是我自己添加的参数，主要目的是为了完成多级表头和单元格合并的功能，需要在Export2Excel.js文件中修改

export function export_json_to_excel(multiHeader, th, jsonData, defaultTitle ,merges,autoWidth = true,)

if(typeof (multiHeader) != undefined){for(let item of multiHeader){data.unshift(item);};};//增加多级表头

/*设置每列的最大宽度*/if (autoWidth) {/*设置worksheet每列的最大宽度*/var colWidth = data.map(row => row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {'wch': 4};}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255 && val.toString().length >= 16) {return {'wch': 16/*val.toString().length * 3*/};} else {return {'wch': val.toString().length *3};}}))/*以第一行为初始值*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch'];}}}ws['!cols'] = result;}

if(typeof(merges) != undefined ){ws['!merges'] = merges;};//合并单元格

ws[’!col’]控制单元格的宽度，ws[’!merges’]控制单元格的合并，表格样式设置方法，也是在Export2Excel.js中修改

const borderAll = {//单元格外侧框线top: {style: "thin"},bottom: {style: "thin"},left: {style: "thin"},right: {style: "thin"}};

let tableTitleFont = {font: {sz: 14,color: "black",underline: false},alignment: {horizontal: "center",vertical: "center"},border: borderAll};

let dataInfo = wb.Sheets[wb.SheetNames[0]];let keyArr = Object.keys(dataInfo)//将对象的key值转换为数组dataInfo['A1'].s = tableTitleFont;if(typeof(multiHeader) != undefined){for(let i=0;i<multiHeader.length;i++){for(let j=0;j<th.length;j++){dataInfo[keyArr[(i+1)*th.length+j]].s = tableLabelFont;//tableLabelFont类似tableTitleFont，可以自行设置，在复制过程中，请设置，不然报错}}};for(let i=1 + multiHeader.length;i<=colWidth.length - 1;i++){for(let j=0;j<th.length;j++){dataInfo[keyArr[i*th.length+j]].s = tableLabelFont;}}for(let i in dataInfo){if(dataInfo[i].v == ''){dataInfo[i].s = tableLabelFont}};

上述添加的代码可以完成表格的样式调整，如不需要样式，不需要修改Export2Excel.js，在导出方法exportExcel中export_json_to_excel只传入tHeader、data、title即可。以上是我对前端保存excel方法的使用理解，希望能对你们有用，最后一种方法参考https://blog.csdn.net/developerwyg/article/details/105348288
个人理解，有不正确的地方，请指正。