vue2踩坑之项目：vue2+element实现前端导出

1.安装插件依赖

npm i --save [email protected] [email protected]

2.单页面引入 前端导出插件

import FileSaver from "file-saver";

import * as XLSX from "xlsx";

//html

   返回


      
      
        
        
        
        
        
        
        
        
        
      
      
//data
// 表格数据
tableList: [],

//js
   // 初始化数据
    async getTable () {
      this.loading = true;
      let res = await RechargeRecord()
      this.accMoney = res.accMoney;
      this.tableList = res.list;
      // this.total = res.count;
      this.loading = false;
    },
    // 导出excel
    handleExport() {
//需要注意的是：纯前端导出的话  会将百分比变成了小数  解决办法是 在获取表格的时候设置：{ raw: true }
//例如： const wb = XLSX.utils.table_to_book(document.querySelector('#table-ref'), { raw: true })

      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{ raw: true });
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        "充值记录.xlsx"
      );
      return wbout;
    },

---

上一篇文章，

uniapp踩坑之项目：canvas第一次保存是空白图片-CSDN博客文章浏览阅读2次。在ctx.draw()回调生成图片，参考canvasToTempFilePath接口文档。缓存二维码图片canvas路径，把画布转化成临时文件，保存临时文件路径到缓存https://blog.csdn.net/weixin_43928112/article/details/135685206