40 | 导出Excel-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

40 | 导出Excel

在软件开发中，尤其是在处理大量数据或需要生成报表的场景下，将数据导出为Excel文件是一项常见且重要的功能。TypeScript，作为JavaScript的一个超集，因其类型系统的强大和与JavaScript的无缝集成，在前端及Node.js后端开发中广受欢迎。本章节将深入探讨如何在TypeScript项目中实现Excel文件的导出功能，涵盖前端和后端两种场景，并介绍几种流行的库和工具。

一、前端导出Excel

在前端应用中，直接操作文件系统（如创建或保存文件）受到浏览器安全策略的限制。但我们可以利用Blob对象和URL.createObjectURL()方法，结合JavaScript库来生成Excel文件并触发下载。

1.1 使用SheetJS（xlsx库）

SheetJS（也称为xlsx库）是一个功能强大的库，支持在浏览器中解析和生成Excel文件。它支持多种文件格式，包括XLSX、XLS、CSV等。

安装SheetJS

如果你在使用npm或yarn管理项目依赖，可以通过以下命令安装SheetJS：

npm install xlsx
# 或者
yarn add xlsx

示例代码

以下是一个使用SheetJS在前端导出Excel的简单示例：

import * as XLSX from 'xlsx';
function exportToExcel(data: any[][], fileName: string) {
    const ws_name = "Sheet1";
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(wb, ws, ws_name);
    // 生成Excel文件的Blob对象
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
    // 触发下载
    function s2ab(s: string) {
        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;
    }
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName + '.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
// 示例数据
const data = [
    ["姓名", "年龄", "职业"],
    ["张三", 28, "软件工程师"],
    ["李四", 32, "产品经理"]
];
exportToExcel(data, "员工信息");

二、后端导出Excel

在后端，特别是使用Node.js时，导出Excel文件通常涉及生成文件并发送到客户端。这里我们将介绍如何在Node.js环境中使用xlsx库（与前端相同，但用法略有不同）和express框架来实现。

2.1 设置Node.js环境

首先，确保你的Node.js环境已经安装，并创建一个新的项目，安装必要的依赖：

mkdir my-excel-project
cd my-excel-project
npm init -y
npm install express xlsx

2.2 创建Express服务器

接下来，创建一个简单的Express服务器，用于处理HTTP请求并返回Excel文件。

示例代码

import express from 'express';
import * as XLSX from 'xlsx';
const app = express();
const port = 3000;
app.get('/download-excel', (req, res) => {
    const data = [
        ["姓名", "年龄", "职业"],
        ["张三", 28, "软件工程师"],
        ["李四", 32, "产品经理"]
    ];
    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    // 设置响应头
    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    res.setHeader('Content-Disposition', 'attachment; filename="员工信息.xlsx"');
    // 写入响应体
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' });
    res.send(wbout);
});
app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
});

三、高级话题

3.1 样式和格式化

SheetJS支持在Excel文件中添加样式和格式化，如字体、颜色、边框等。这可以通过操作单元格的样式对象来实现，但需要注意，样式处理相对复杂，且并非所有Excel客户端都完全支持所有样式特性。

3.2 安全性与性能

当处理大量数据时，导出Excel文件可能会消耗大量内存和CPU资源。此外，如果导出的数据包含敏感信息，还需要考虑数据加密和访问控制等安全问题。

3.3 跨平台兼容性

虽然Excel文件格式（如XLSX）在大多数现代办公软件中都有良好的支持，但在一些老旧系统或特定应用场景中，可能还需要考虑其他文件格式（如CSV）的兼容性。

四、总结

在TypeScript项目中实现Excel文件的导出功能，无论是前端还是后端，都可以通过合适的库和工具来简化开发过程。SheetJS（xlsx库）因其强大的功能和广泛的兼容性，成为了处理Excel文件的热门选择。通过本章节的学习，你应该能够掌握在TypeScript项目中导出Excel文件的基本方法，并了解如何根据实际需求进行扩展和优化。