使用vue实现导出Excel功能【纯前端】

项目场景：

最近接手一个项目，其中一个需求是将查询出来table中的数据导出为Excel文件，并下载到本地。

问题来了，这种东西，不是应该后端去实现更好一些吗？如果放在前端做，要拿到全部数据，然后把这些数据进行解析，再进行一系列的骚操作转化成Excel文件，假如数据量少还好，万一数据量庞大，给我整个几万条，那浏览器岂不是卡***？？（当然这只是我这枚小菜鸟的个人见解，如果有路过的大神有好的建议或者经验，还请赐教一下~~）

----------------------------------------------------废话分割线 -------------------------------------------------------------

言归正传，当我查了一些资料的时候，发现实现起来其实还是挺简单的，老规矩，不废话了，直接上代码！

解决方案：

1、装包：npm install xlsx file-saver --save

2、引入：import XLSX from ‘xlsx’

3、template中写一个button，doExport为点击事件，触发导出功能

导出Excel

界面样式如下：

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  {        self.exportLoading = false      })}

导出文件时，loading样式如下：

文件下载成功！

ok！至此就结束了，代码非常简单，亲测可用，cv即可~~

如果大家有什么更好的意见，欢迎批评指正！