vue中el-table前端导出excel数据表格
// web导出汇总单excel
webExportTotalExcel(){
// 获取表格数据
//const tableData = ;
const tableData = this.userTotalList.map(row => { //创建一个新的数组，处理null值
return Object.keys(row).reduce((acc, key) => {
acc[key] = row[key] === null ? '' : row[key];
return acc;
}, {});
});
// 构建 Excel 文件内容
let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`;
// 添加表头
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<th>${column.label}</th>`;
}
}
excelContent += '</tr>';
// 添加表格数据
for (const row of tableData) {
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<td>${row[column.property]}</td>`;
}
}
excelContent += '</tr>';
}
// 构建完整的 Excel 文件内容
excelContent += '</table></body></html>';
// 创建 Blob 对象
const blob = new Blob([excelContent], { type: 'application/-excel' });
// 创建链接并触发下载
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = '汇总单.xlsx'; // 设置默认文件名
link.style.display = "none";
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
},