前端导出excel后没有单元格？

Question

前端导出excel后没有单元格？

dayDayUp

1521049

发布于
3 月 27 日广东

更新于
3 月 27 日

背景：

在项目开发中，经常需要下载模板/导出表单数据（excel)格式的需求，虽然xlsx库可以满足基本需求，但是有些excel表的样式很难定制化，所以想着自己封装一个

尝试：

封装思路：

excel和table关联起来，而连接两者的桥梁为new Blob()构造函数，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML Table Example</title>
</head>

<body>
  <table border="1">
    <colgroup>
      <col width="100" />
      <col width="150" />
      <col width="200" />
    </colgroup>
    <thead>
      <th style="background-color: pink">姓名</th>
      <th style="background-color: pink">年龄</th>
      <th style="background-color: pink">职位</th>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>工程师</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>35</td>
        <td>医生</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>学生</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 获取table元素  
    var tableElement = document.querySelector('table');

    // 获取table元素的domString表示  
    var tableDomString = tableElement.outerHTML;
    const blob = new Blob([tableDomString], { type: "application/vnd.ms-excel" });
    // 创建一个 <a> 元素用于下载 Excel 文件
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = 'test2' + '.xlsx'; // 设置下载文件的名称
    // 触发点击下载
    a.click();
    a.remove();
  </script>
</body>

</html>

结果：可以正常生成excel文件

缺点：但是又有点不太像excel的格式，比如我想在excel表里面新增行或者列的话，样式会有问题。
希望有可编辑的单元格，类似这种

excel html javascript 前端

阅读 534

AI BotBETA

答案：

您遇到的问题是由于您正在使用Blob对象将HTML表格的outerHTML作为纯文本导出，而不是使用真正的Excel文件格式（如XLSX）。因此，生成的Excel文件只是将HTML表格结构显示为文本，而不是具有可编辑单元格的真正Excel表格。

为了创建具有可编辑单元格的Excel文件，您需要使用适当的库来生成XLSX格式的文件。一个流行的JavaScript库是SheetJS的js-xlsx，它允许您创建、读取和修改XLSX文件。

以下是使用js-xlsx库创建可编辑单元格的Excel文件的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML Table to Excel with Editable Cells</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.min.js"></script>
</head>

<body>
  <table id="myTable" border="1">
    <colgroup>
      <col width="100" />
      <col width="150" />
      <col width="200" />
    </colgroup>
    <thead>
      <th style="background-color: pink">姓名</th>
      <th style="background-color: pink">年龄</th>
      <th style="background-color: pink">职位</th>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>工程师</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>35</td>
        <td>医生</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>学生</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 获取table元素
    var tableElement = document.getElementById('myTable');

    // 将table元素转换为工作表
    var worksheet = XLSX.utils.table_to_sheet(tableElement);

    // 创建工作簿并添加工作表
    var workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 将工作簿转换为blob对象
    var blob = new Blob([XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

    // 创建一个 <a> 元素用于下载 Excel 文件
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = 'test.xlsx'; // 设置下载文件的名称

    // 触发点击下载
    a.click();
    a.remove();
  </script>
</body>

</html>

在上面的示例中，我们使用了js-xlsx库来将HTML表格转换为Excel工作表，并将其添加到工作簿中。然后，我们将工作簿转换为blob对象，并使用与您的原始代码相似的逻辑来创建下载链接。现在，生成的Excel文件将具有可编辑的单元格，并且可以像正常的Excel文件一样打开和编辑。

1 个回答

得票最新

陟上晴明

21.1k124691

发布于
3 月 27 日浙江

✓ 已被采纳

如果现在让我推荐一个 Excel 的JS库，我一定会推荐 ExcelJS。非常好用，而且样式定制也很简单。