vue+elementUI,前端导出表格,去除不需要的表格列
作者:互联网
码字不易,转载请注明出处,谢谢~
遇到的问题:前端导出表格,表格中有些列不需要导出,例如操作列之类的。原理是通过ref获取表格列,把不需要导出的表格列数据去除。
解决方案
①先在elementUI的表格组件上挂一个ref,再通过this.ref.table获取到组件的dom
点击查看代码
<el-table
:data="form.tableDate"
ref="table"
border
></el-table>
②使用封装好的getXlsxFile函数,getXlsxFile在第③步,第三步才是重点
点击查看代码
let ignoreList = ["操作"];
let tableList = this.form.tableDate;
let tableName = "导出表格";
this.getXlsxFile(this.$refs.table, ignoreList, tableList, tableName);
③使用封装好的getXlsxFile函数
点击查看代码
import XLSX from "xlsx";
import FileSaver from "file-saver";
//处理表格数据
//tableRef-表格的ref值
//ignoreList-忽略导出列,例如['操作','产品操作'],表示操作、产品操作这一列不导出
//tableDate-表格数据
//tableName-导出的文件名
//colsList-表格列宽,没有就按默认列宽导出,例如:[{ wch: 5 },{ wch: 5 },...]
//mergesList-合并规则,例如[[e:{r:4,c:0},s:{r:3,c:0}],...],表示第1列的第4个格子向第1列的第5个格子合并
export function getXlsxFile(tableRef, ignoreList, tableDate, tableName, colsList = [], mergesList = []) {
let enHeader = [];//英文表头
let zhHeader = [];//中文表头
//将表格的dom节点转换成可遍历的数组
var tableTitle = tableRef.$el
.querySelector(".el-table__header-wrapper")
.querySelector(".has-gutter")
.querySelector("tr").childNodes;
for (let index0 = 0; index0 < tableTitle.length; index0++) {
if (
!ignoreList.includes(
tableTitle[index0].textContent
)
) {
//如果不在忽略导出列表,则加到中文表头
zhHeader.push(tableTitle[index0].textContent);
for (
let index1 = 0;
index1 < tableRef.$children.length;
index1++
) {
//对应在tableRefName.$children找到和中文匹配的属性英文名
if (
tableRef.$children[index1].label ===
tableTitle[index0].textContent
) {
enHeader.push(tableRef.$children[index1].prop);
break;
}
}
} else {
}
}
//定义xlsx的表头,是表格的第一行即中文表头
let xlsxList = [zhHeader];
//循环表格数据,将每一行表格数据添加到xlsxList中
tableDate.map((item, index0) => {
xlsxList[index0 + 1] = [];
//按照每行数据都按照定义的英文表头排序
for (let index1 = 0; index1 < enHeader.length; index1++) {
xlsxList[index0 + 1].push(item[enHeader[index1]]);
}
});
var wb = XLSX.utils.book_new(); //创建一个空的工作簿
wb.SheetNames.push(tableName); //加入第一个工作表
wb.Sheets[tableName] = XLSX.utils.aoa_to_sheet(xlsxList); //给第一个工作表赋值
wb.Sheets[tableName]["!cols"] = colsList
wb.Sheets[tableName]["!merges"] = mergesList;
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: "application/octet-stream",
}),
//设置导出文件名称
tableName + "-" + Date.now() + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
标签:vue,表格,elementUI,导出,tableName,let,index0,index1 来源: https://www.cnblogs.com/loveniko/p/16386161.html