表格下载成excel文件时,同时把表头title信息也下载下来

82 阅读1分钟

插件:import * as XLSX from "xlsx";

需求:利用xlsx插件进行下载表格数据为excel文件,同时用户想要实现表头的title注释内容也要能够下载到excel中,title的注释内容在单独在表格中的一行显示。 image.png

实现:

  1. 配置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 />
  1. 下载文件
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");
};