将el-table表格显示的内容导出到Excel

在现代 Web 开发中，经常需要将数据从 Web 应用程序导出到 Excel 文件中。本文将指导你如何使用 JavaScript 和 XLSX 库实现此功能，将 HTML 表格中的数据导出为 Excel 文件。

步骤 1：导入 XLSX 库

首先，需要在项目中导入 XLSX 库。这是一个用于处理 Excel 文件的流行 JavaScript 库。你可以使用以下命令通过 npm 安装它：

Copy

npm install xlsx

步骤 2：创建导出函数

接下来，创建一个名为 copyTableToClipboard 的公共函数，用于将指定的 HTML 表格导出为 Excel 文件。该函数将接受两个参数：要导出的表格元素和输出 Excel 文件的名称。

Copy

export function copyTableToClipboard(table, name) {
  // ...
}

步骤 3：将 HTML 表格转换为二维数组

要将 HTML 表格导出为 Excel，需要将其内容转换为一个二维数组，其中每一行对应表格的一行，每一列对应表格的一列。可以使用 twoArray 函数实现此转换：

Copy

function twoArray(table) {
  // ...
}

步骤 4：根据二维数组创建 Excel 文件

一旦有了二维数组，就可以使用 createExcelFromData 函数创建 Excel 文件。此函数将接受二维数组和输出 Excel 文件的名称作为参数：

Copy

function createExcelFromData(array, name) {
  // ...
}

步骤 5：触发下载

最后，调用 createExcelFromData 函数创建 Excel 文件并触发下载。此函数将使用 XLSX 库将工作簿转换为 Excel 文件的缓冲区，然后创建一个 Blob 对象并触发下载：

Copy

createExcelFromData(tableString, name);

完整示例

以下是完整示例代码，展示如何使用 copyTableToClipboard 函数将 HTML 表格导出为 Excel 文件：

Copy

import * as XLSX from "xlsx";

export function copyTableToClipboard(table, name) {
  const tableString = twoArray(table);
  createExcelFromData(tableString, name);
}

function twoArray(table) {
  const rows = table.querySelectorAll('tr');
  let tableString = '';

  rows.forEach(row => {
    const cells = row.querySelectorAll('th, td');
    const rowContent = [];

    cells.forEach(cell => {
      const data = cell.innerText;
      rowContent.push(`"${data.replace(/"/g, '""')}"`);
    });

    tableString += rowContent.join(',') + '\n';
  });

  const string = tableString.split('\n');
  const transformedData = string.map(row => {
    return row
      .split('","')
      .map(cell => cell.replace(/"/g, ''));
  });

  return transformedData;
}

function createExcelFromData(array, name) {
  const removeQuotes = (str) => {
    if (typeof str === 'string') {
      return str.replace(/"(.*)"/g, '$1');
    }
    return str;
  };

  const cleanedData = array.map(row => row.map(removeQuotes));
  const workSheet = XLSX.utils.aoa_to_sheet(cleanedData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, workSheet, 'Sheet1');
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
  const data = new Blob([excelBuffer], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = name + '.xlsx';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

现在，你可以使用 copyTableToClipboard 函数将任何 HTML 表格导出为 Excel 文件。只需将表格元素和输出 Excel 文件的名称作为参数传递给该函数即可。

PS：

• 遇到虚拟表格只能导出视图内容，
• 导出表格带选择框会空一列（自己调就行）
• 无法识别input节点