JS生成Excel|极客笔记

JS生成Excel

在Web开发中，有时候需要将数据导出为Excel格式，以便用户下载和查看。虽然通常可以使用服务器端来生成Excel文件，但在某些情况下，我们也可以在前端使用JavaScript来实现这个功能。本文将详细介绍如何使用JS生成Excel文件。

为什么要在前端生成Excel文件？

在一些简单的场景下，可能并不需要在服务器端进行Excel文件的生成。在这种情况下，使用前端JavaScript可以提高用户体验，减少服务器端的负担。例如，对于一些表格数据需要用户自行导出，使用前端JS来生成Excel文件是一个不错的选择。

使用js-xlsx库生成Excel文件

在前端生成Excel文件，一种常用的方式是使用js-xlsx库。这个库可以帮助我们将数据转换为Excel文件。

安装js-xlsx

首先，我们需要安装js-xlsx库。可以通过npm进行安装：

npm install xlsx

也可以直接在HTML中引入js-xlsx库：

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

示例代码

接下来，我们来看一个简单的示例代码，演示如何使用js-xlsx库生成Excel文件。假设我们有一个包含学生信息的数组：

const data = [
    ["Name", "Age", "Grade"],
    ["Alice", 20, "A"],
    ["Bob", 21, "B"],
    ["Cathy", 22, "C"]
];

我们可以使用以下代码将这个数组转换为Excel文件，并提供下载链接：

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

const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'students.xlsx';
a.click();

URL.revokeObjectURL(url);

在这段代码中，我们首先创建一个新的工作簿（wb），然后将数据转换为工作表（ws），并将工作表添加到工作簿中。接着将工作簿转换为Excel文件内容（wbout），并使用Blob对象创建一个下载链接。最后创建一个<a>元素，设置其href为下载链接，并触发点击事件以下载文件。