第一步:安装所需要的的依赖模块
cnpm i file-saver --save
cnpm i xlsx --save
第二步:在需要导出的页面引入以下两个模块
import FileSaver from "file-saver"; import XLSX from "xlsx";
第三步:给table添加一个Id
<el-table id="table" :data="tableData" style=" 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<button @click="exportExcel">导出数据</button>
第四部分:js
exportExcel() { var xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换(添加此行代码表格中的百分比就不会再导出的时候被转换成小数点) let wb = XLSX.utils.table_to_book( document.querySelector("#table"), xlsxParam ); let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); // 获取当前的时间戳,用来当文件名 let time = new Date().getTime(); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), `${time}.xlsx` ); //${time}是自己导出文件时的命名,随意 } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },