フロントエンドでファイルストリーム形式でExcelをエクスポートする

前端

2023-07-02 10:12:38

在前端用文件流形式导出 Excel 的终极指南

简介

在前端开发中，导出数据为可共享且可操作的 Excel 文件的需求很常见。文件流导出是一种高效的方法，可以处理大量数据，而无需在服务器上创建临时文件。本文将详细介绍如何在前端使用文件流形式导出 Excel。

先决条件

Node.js 和 Express.js
ExcelJS 库
基本的 JavaScript、HTML 和 CSS 技能

步骤指南

1. 设置项目

使用以下命令初始化项目：

mkdir my-project
cd my-project
npm init -y

2. 安装依赖项

安装所需的库：

npm install express file-stream exceljs

3. 创建服务器

使用 Express.js 创建一个简单的服务器：

const express = require('express');
const app = express();

app.get('/export', async (req, res) => {
  // ...
});

app.listen(3000);

4. 获取数据

通过 API 调用或其他方法获取要导出的数据。例如：

const data = await fetch('/api/data').then(res => res.json());

5. 创建 Excel 工作簿

使用 ExcelJS 库创建新的 Excel 工作簿和工作表：

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet 1');

6. 添加数据到工作表

将数据添加到工作表，定义列标题和行数据：

worksheet.columns = [
  { header: 'ID', key: 'id' },
  { header: 'Name', key: 'name' },
  { header: 'Age', key: 'age' },
];
worksheet.addRows(data);

7. 导出为文件流

通过 xlsx.writeBuffer() 方法将工作簿导出为文件流：

res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader('Content-Disposition', 'attachment; filename=data.xlsx');
res.send(await workbook.xlsx.writeBuffer());

8. 触发下载

向客户端发送文件流以触发下载：

app.get('/export', async (req, res) => {
  // ...
  res.send(await workbook.xlsx.writeBuffer());
});

示例代码

const express = require('express');
const fileStream = require('file-stream');
const ExcelJS = require('exceljs');

const app = express();

app.get('/export', async (req, res) => {
  // 获取数据
  const data = await getData();

  // 创建 Excel 工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet 1');

  // 添加数据到工作表
  worksheet.columns = [
    { header: 'ID', key: 'id' },
    { header: 'Name', key: 'name' },
    { header: 'Age', key: 'age' },
  ];
  worksheet.addRows(data);

  // 创建文件流
  const fileStreamInstance = fileStream();

  // 将工作簿写入文件流
  workbook.xlsx.write(fileStreamInstance);

  // 向客户端发送文件流
  fileStreamInstance.pipe(res);
});

app.listen(3000);