最近在做项目，前端进行处理数据，导出excel中，还是遇到不少问题，这里将其进行总结一下，博主是vue框架开发，借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果。地址链接如下：
【js-xlsx和file-saver插件】前端导出数据到excel
import fs from 'file-saver' import XLSX from 'xlsx' export default (json, fields, filename = '测试数据.xlsx') => { json.forEach(item => { for (let i in item) { if (fields.hasOwnProperty(i)) { item[fields[i]] = item[i]; } delete item[i]; //删除原先的对象属性 } }) let sheetName = filename //excel的文件名称 let wb = XLSX.utils.book_new() //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。 let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。 wb.SheetNames.push(sheetName) wb.Sheets[sheetName] = ws const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式 let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false } //写入的样式 let wbout = XLSX.write(wb, wopts) let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) fs.saveAs(blob, filename + '.xlsx') } const s2ab = s => { if (typeof ArrayBuffer !== 'undefined') { var buf = new ArrayBuffer(s.length) var view = new Uint8Array(buf) for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff return buf } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } }
调用当时如下，现在vue种引入该js文件，如下：
import xlsx from "../../utils/xlsx.js";
然后我们开始调用该方法，如下：
/** * 导出到excel **/ exportToExcel() { let fields = { test1:"测试1", test2:"测试2" }; this.getHeadMapList.forEach(item => { fields['_' +item.key] = item.value; //动态生成的头 }); fields.totalCommission = "奖励总数" //此处有vue大坑，不能直接使用xlsx(this.getComputedData),必须先转一下 let data = JSON.parse(JSON.stringify(this.getComputedData));
xlsx(data, fields, "奖励汇总列表"); },
此处有两处大坑，一个是data不能直接使用this.getBuildData ，而要将其转换一下，原因是this.getBuildData是计算
出来的，vue里面会自动更改它的值，这个bug找了好久才搞定，心塞。
