插件:import * as XLSX from "xlsx";
需求:利用xlsx插件进行下载表格数据为excel文件,同时用户想要实现表头的title注释内容也要能够下载到excel中,title的注释内容在单独在表格中的一行显示。
实现:
- 配置columns数据
const columns = ref([
{ label: "aa", prop: "", title: "hhhhhhhhhh" },
{
label: "bb",
prop: "",
title: "The total number of publications this year.",
},
]);
上方label与下方label对应,上方prop与下方prop对应,上方title与下方title对应
--------------------------
<el-table-column label="aa" prop="" title="hhhhhhhhhh" fixed sortable />
- 下载文件
const exportToExcel = () => {
const headerCommentRow = columns.value.map((col) => col.title); // 注释行
const headerNamesRow = columns.value.map((col) => col.label); // 表头行
const exportData = [
headerCommentRow, // 第一行: 注释
headerNamesRow, // 第二行: 表头
...tableDetailData.value.map((item) =>
columns.value.map((col) => item[col.prop])
), // 数据行
];
// 创建工作簿和工作表
const worksheet = XLSX.utils.aoa_to_sheet(exportData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// 下载 Excel 文件
XLSX.writeFile(workbook, "journalMonthlyReportTable.xlsx");
};