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;},// 导出excelhandleExport() {
//需要注意的是：纯前端导出的话  会将百分比变成了小数  解决办法是 在获取表格的时候设置：{ 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