项目场景：
最近接手一个项目，其中一个需求是将查询出来table中的数据导出为Excel文件，并下载到本地。
问题来了，这种东西，不是应该后端去实现更好一些吗？如果放在前端做，要拿到全部数据，然后把这些数据进行解析，再进行一系列的骚操作转化成Excel文件，假如数据量少还好，万一数据量庞大，给我整个几万条，那浏览器岂不是卡死？？（当然这只是我这枚小菜鸟的个人见解，如果有路过的大神有好的建议或者经验，还请赐教一下~~）
----------------------------------------------------废话分割线 -------------------------------------------------------------
言归正传，当我查了一些资料的时候，发现实现起来其实还是挺简单的，老规矩，不废话了，直接上代码！
解决方案：
1、装包：npm install xlsx file-saver --save
2、引入：import XLSX from ‘xlsx’
3、template中写一个button，doExport为点击事件，触发导出功能
<el-buttontype="primary"size="small":loading="exportLoading"icon="el-icon-document"@click="doExport">导出Excel</el-button>界面样式如下：
4、methods代码如下：
doExport() { // 开始生成文件时，添加一个loading让它一直转，待生成excel完毕之后再关掉 this.exportLoading = true // 关键函数 function exportToExcel(fileName, tableData) { const worksheet = XLSX.utils.json_to_sheet(tableData) const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] } const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) const data = new Blob([excelBuffer], { type: 'application/octet-stream' }) FileSaver.saveAs(data, `${fileName}.xlsx`) } // fileName 为生成的 Excel 文件名称，为避免重复，这里使用时间戳作为前缀 const fileName = moment().format('YYYY-MM-DD hh:mm:ss') + ' xxx信息数据' // perPageSize 为请求数据的数量，由于需求方想要全部的数据，而前端又要分页，所以只能把这个参数设置成很大喽，如果出问题我也没办法~ const params = { page: this.currentPage - 1, size: 100000, queryCondition: { area: this.searchForm.area, deviceType: this.searchForm.deviceType, hospitalName: this.searchForm.deviceCustomer, erpMaterialDescription: this.searchForm.erpMaterialDescription, deviceSerialNumber: this.searchForm.deviceSerialNumber, materialNumber: this.searchForm.materialNumber, workOrderCreatedTimeStart: this.searchForm.workOrderCreatedTime, workOrderCreatedTimeEnd: this.searchForm.workOrderCreatedTime, workOrderClosedTimeStart: this.searchForm.workOrderClosedTime, workOrderClosedTimeEnd: this.searchForm.workOrderClosedTime, workOrderNumber: this.searchForm.workOrderNumber, engineerName: this.searchForm.engineerName, warrantyStatus: this.searchForm.warrantyStatus, materialReplaceTimesLow: this.searchForm.materialReplaceTimesLow, materialReplaceTimesHigh: this.searchForm.materialReplaceTimesHigh } } console.log(params) const self = this ibMaterialApi.getIBMaterialTableData(params).then(res => { if (res.code === 200) { // 解析excel文件 const excelData = [] for (let i = 0; i < res.data.length; i++) { const excelObj = {} excelObj.序列号 = (i + 1).toString() excelObj.创建时间 = res.data[i].createTime === '0' ? '暂无数据' : res.data[i].createTime excelObj.物料号 = res.data[i].materialNumber excelObj.物料描述 = res.data[i].erpMaterialDescription excelObj.客户名称 = res.data[i].hospitalName excelObj.省份 = res.data[i].area excelObj.机型 = res.data[i].deviceType excelObj.整机序列号 = res.data[i].deviceSerialNumber excelObj.故障时间 = res.data[i].equipmentDowntime excelObj.故障描述 = res.data[i].diagnose excelObj.解决方案 = res.data[i].suggestionSolution ? res.data[i].suggestionSolution : '暂无数据' excelObj.旧件序列号 = res.data[i].oldSerialNumber ? res.data[i].oldSerialNumber : 'N.A' excelObj.保修状态 = res.data[i].warrantyStatus excelObj.工单号 = res.data[i].caseId excelData.push(excelObj) } console.log(excelData) exportToExcel(fileName, excelData) self.exportLoading = false } else { self.exportLoading = false } }).catch(() => { self.exportLoading = false })}导出文件时，loading样式如下：
文件下载成功！
ok！至此就结束了，代码非常简单，亲测可用，cv即可~~
如果大家有什么更好的意见，欢迎批评指正！