1、实现导出Exsel
可选中导出，也可以直接导出当前页
导出的xlsx最终效果
Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)
1.安装相关依赖
npm install --save xlsx file-saver
2·组件里头引入
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
3·给el-table加一个ID 定义导出事件
//定义导出表格触发事件
exportExcel() {
let wb = XLSX.utils.table_to_book(document.querySelector("#table"), {
raw: true,//如果表格里有数字、日期这些、需要加上raw: true
});
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象。
new Blob([wbout], { type: "application/octet-stream" }),
// 设置导出文件名称
"统计核算.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
这时候导出表格就实现了！！！！
2、导出Exsel数据重复
这个主要是使用了el-table固定列添加了fixed属性，el-ui团队的实现方式是创建两个table定位显示影藏实现，导致导出数据是重复的两组，解决方式找到带有.fixed类名的表格，如果有，转换excel时先将该dom移除
//定义导出Excel表格事件
exportExcel() {
// 解决生成重复数据-因为使用l fixed属性 注意你的fixed是left还是right
var fix = document.querySelector("#daochu2 .el-table__fixed-right");
var wb;
// 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
if (fix) {
/* 从表生成工作簿对象 */
wb = XLSX.utils.table_to_book(
document.querySelector("#table").removeChild(fix),
{ raw: true }
);
document.querySelector("#table").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#table"), {
raw: true,
});
}
/* 获取二进制字符串作为输出 */
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;
}
3、实现选中导出
选中导出在查阅相关资料后，感觉较为复杂，参考文章https://blog.csdn.net/Principal_Z/article/details/102869532
最后想到一个非常简单的实现方式：
通过el-table里的@selection-change时间就可以直接拿到用户选中的数据数组
1.拿到选中数据 这里用selectList接收存起来
//表格选中事件回调
handleSelectionChange(val) {
//选中批量导出的 给导出专用表格赋值数据
this.selectList = val; //选中数据
}
2.把展示的表格复制一份 让这个表格的data=选中的数据 另起一个ID 使用css定位或者透明度隐藏起来
这样我们选中的数据就在第二个隐藏的表格里 导出时导出第二个表格的数据即可实现选中导出！
image.png
其他参考文章
表格导出Excel表格https://www.jianshu.com/p/1971fc5b97ca
选中导出https://blog.csdn.net/Principal_Z/article/details/102869532
