简介:
一般适用于没有分页的,完整表格那种,否则这种在后端实现的话,会稍微复杂一些,而且因为是全部数据都查出来的,也不需要考虑重新去获取多一次数据
实现方式:
1、下载依赖
npm install --save xlsx file-saver
2、引入插件
import FileSaver from "[file-saver](https://so.csdn.net/so/search?q=file-saver&spm=1001.2101.3001.7020)";
import * as XLSX from "xlsx";
3、js方法
exportExcel() {
//转换成excel时,使用原始的格式
var xlsxParam = { raw: true };
let fix = document.querySelector(".el-table__fixed");
let wb;
//判断有无fixed定位,如果有的话去掉,后面再加上,不然数据会重复
if (fix) {
wb = XLSX.utils.table_to_book(
document.querySelector("#tableId").removeChild(fix),xlsxParam);
document.querySelector("#tableId").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
}
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
4、在table中添加id
用于js方法中能够获取到该元素
5、在对应的按钮中调用exportExcel方法
调用即可
就可以导出了~