JS导出Excel|极客笔记

JS导出Excel

在Web开发中，经常会遇到需要导出数据到Excel的需求。虽然前端技术一般是用来展示数据的，但是通过一些库和技术，我们可以实现在前端将数据导出成Excel文件。本文将详细介绍如何使用JavaScript导出Excel文件。

准备工作

在开始导出Excel之前，我们首先要安装一个第三方库SheetJS（js-xlsx），这个库可以帮助我们实现Excel文件的操作。

你可以通过npm进行安装：

npm install xlsx

如果你直接使用CDN链接也是可以的：

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

导出Excel

步骤一：准备数据

首先，我们需要有一些数据可以导出。假设我们有一个数组存储了一些学生的信息，包括姓名、年龄和成绩：

const data = [
  ["姓名", "年龄", "成绩"],
  ["张三", 20, 90],
  ["李四", 22, 85],
  ["王五", 21, 88]
];

步骤二：创建Workbook和Worksheet

在使用SheetJS导出Excel文件时，我们需要先创建一个Workbook对象，并在其中添加一个Worksheet：

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

步骤3：导出Excel文件

最后一步是将Workbook对象保存为Excel文件。我们可以使用Blob对象创建一个Excel文件，并提供下载链接：

const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "students.xlsx");

示例代码

下面是一个完整的示例代码，演示了如何使用SheetJS导出Excel文件：

const data = [
  ["姓名", "年龄", "成绩"],
  ["张三", 20, 90],
  ["李四", 22, 85],
  ["王五", 21, 88]
];

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "students.xlsx");

运行以上代码，会生成一个名为students.xlsx的Excel文件，其中包含了我们准备的学生信息数据。