前端秒变Excel：200行代码导出Excel，DIY样式纵横合并

前端

2023-08-17 02:05:57

纯前端导出 Excel：轻松搞定数据导出

在现代前端开发中，导出 Excel 文件的需求越来越普遍。过去，我们不得不依赖第三方库或后端支持，但现在，纯前端也能轻松实现 Excel 导出，无需任何外部依赖。本文将深入介绍纯前端 Excel 导出，涵盖从准备工作到扩展功能的各个方面。

准备工作

1. 掌握基础 JavaScript 知识
2. 熟悉前端开发环境

创建项目

新建一个文件夹，作为项目根目录。
在根目录下新建 index.html 和 index.js 文件。

编写代码

1. HTML 结构

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <button onclick="exportExcel()">导出 Excel</button>
  <script src="index.js"></script>
</body>
</html>

2. 导出 Excel 代码

const exportExcel = () => {
  // 获取需要导出的数据
  const data = [
    ['姓名', '年龄', '性别'],
    ['张三', 20, '男'],
    ['李四', 25, '女']
  ];

  // 创建一个新的工作簿
  const workbook = new ExcelJS.Workbook();

  // 添加一个新的工作表
  const worksheet = workbook.addWorksheet('我的工作表');

  // 将数据添加到工作表中
  worksheet.addRows(data);

  // 设置单元格样式
  worksheet.getCell('A1').font = { bold: true };

  // 合并单元格
  worksheet.mergeCells('A1:C1');

  // 保存工作簿
  workbook.xlsx.writeBuffer().then((buffer) => {
    // 创建一个 blob 对象
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

    // 创建一个指向 blob 对象的 URL
    const url = URL.createObjectURL(blob);

    // 触发文件下载
    const a = document.createElement('a');
    a.href = url;
    a.download = '我的工作表.xlsx';
    a.click();

    // 释放 blob 对象
    URL.revokeObjectURL(url);
  });
};