vue导出表格嵌套表格详细步骤

1. 安装依赖

安装xlsx和file-saver依赖，用于导出表格和保存文件。

npm install xlsx file-saver

2. 准备数据

准备要导出的数据，包括表头和表格数据。

const tableHeader = [
  { text: "姓名", value: "name" },
  { text: "性别", value: "gender" },
  { text: "年龄", value: "age" },
  { text: "工作单位", value: "company" }
];

const tableData = [
  { name: "张三", gender: "男", age: 25, company: "ABC公司" },
  { name: "李四", gender: "女", age: 30, company: "XYZ公司" },
  { name: "王五", gender: "男", age: 35, company: "DEF公司" }
];

const nestedTableHeader = [
  { text: "日期", value: "date" },
  { text: "销售额", value: "sales" },
  { text: "利润", value: "profit" }
];

const nestedTableData = [
  { date: "2021-01-01", sales: 10000, profit: 2000 },
  { date: "2021-01-02", sales: 12000, profit: 3000 },
  { date: "2021-01-03", sales: 15000, profit: 4000 }
];

const tableDataWithNestedTable = [
  { name: "张三", gender: "男", age: 25, company: "ABC公司", nestedTableData },
  { name: "李四", gender: "女", age: 30, company: "XYZ公司", nestedTableData },
  { name: "王五", gender: "男", age: 35, company: "DEF公司", nestedTableData }
];

其中，tableDataWithNestedTable包含了一个嵌套表格的数据，需要在导出表格时进行处理。

3. 编写导出函数

编写一个导出函数，用于将数据导出为Excel文件。

import XLSX from "xlsx";
import { saveAs } from "file-saver";

export function exportExcel(data, fileName, header) {
  let wb = XLSX.utils.book_new();
  let ws = XLSX.utils.json_to_sheet(data, { header });
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  let wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName + ".xlsx");
}

function s2ab(s) {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

导出函数使用了xlsx和file-saver库。其中，XLSX.utils.json_to_sheet()函数用于将数据转换为Excel表格，XLSX.utils.book_append_sheet()函数用于将表格添加到工作簿中，XLSX.write()函数用于将工作簿写入二进制字符串，最后使用file-saver库的saveAs()函数将字符串保存为Excel文件。

4. 处理嵌套表格

由于表格中包含了嵌套表格，需要对数据进行处理，将嵌套表格展开为一行。

function expandNestedTableData(data) {
  let newData = [];
  for (let i = 0; i < data.length; i++) {
    let row = data[i];
    let nestedTableData = row.nestedTableData || [];
    for (let j = 0; j < nestedTableData.length; j++) {
      let newRow = Object.assign({}, row);
      newRow["date"] = nestedTableData[j].date;
      newRow["sales"] = nestedTableData[j].sales;
      newRow["profit"] = nestedTableData[j].profit;
      newData.push(newRow);
    }
  }
  return newData;
}

expandNestedTableData()函数用于将嵌套表格展开为一行，将嵌套表格中的数据复制到新的行中。

5. 导出表格

在组件中调用导出函数，将数据导出为Excel文件。

export default {
  methods: {
    handleExport() {
      let data = expandNestedTableData(tableDataWithNestedTable);
      exportExcel(data, "表格", [...tableHeader, ...nestedTableHeader]);
    }
  }
}

在导出时，需要将嵌套表格的表头合并到主表头中，作为Excel表格的表头。导出时，将展开后的数据和合并后的表头传入导出函数即可。