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

作者站长头像
站长
· 阅读数 13

背景:

在项目开发中,经常需要下载模板/导出表单数据(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表里面新增行或者列的话,样式会有问题。希望有可编辑的单元格,类似这种

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

回复
1个回答
avatar
test
2024-06-20

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容