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

1.安装插件依赖

npm i --save xlsx@0.17.0 file-saver@2.0.5

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

import FileSaver from "file-saver";

import * as XLSX from "xlsx";

//html
<el-form-item>
   <el-button type="primary" plain size="mini" @click="goBack">返回</el-button>
</el-form-item>

      <!-- 表格区 v-loading="loading"  -->
      <el-table id="out-table" ref="multipleTable" :data="tableList" class="table" border :header-cell-style="tableHeaderCellStyle">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column label="充值号" align="center" prop="billId" show-overflow-tooltip />
        <el-table-column label="用户名称" align="center" prop="username" />
        <el-table-column label="充值类型" align="center" prop="type" />
        <el-table-column label="运营商名称" align="center" prop="channelOperatorName" />
        <el-table-column label="充值金额" align="center" prop="money" />
        <el-table-column label="支付钱包" align="center" prop="payTypeDesc" />
        <el-table-column label="操作人" align="center" prop="creator" />
        <el-table-column label="充值时间" align="center" prop="createDate" />
      </el-table>
      
//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