手摸手教你前端和后端是如何实现导出 Excel 的？

在现代 web 开发中，导出 Excel 文件是一个常见的需求。无论是生成报表、导出数据，还是下载个人资料，很多前端应用都需要与后端协作来实现这一功能。本文将手把手教你如何在前端和后端实现导出 Excel 文件功能。

一、后端实现

以 Node.js + Express 为例，首先我们需要安装一些必要的 npm 包：

npm install express exceljs

接着，我们可以创建一个简单的后端 API，用于生成 Excel 文件并返回给前端。以下是一个简单的示例：

// server.js
const express = require('express');
const ExcelJS = require('exceljs');
const app = express();
const PORT = 3000;

app.get('/export', async (req, res) => {
    // 创建一个新的工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('数据');

    // 添加标题行
    worksheet.columns = [
        { header: '姓名', key: 'name', width: 30 },
        { header: '年龄', key: 'age', width: 10 },
        { header: '邮箱', key: 'email', width: 30 },
    ];

    // 添加一些示例数据
    worksheet.addRow({ name: '张三', age: 25, email: 'zhangsan@example.com' });
    worksheet.addRow({ name: '李四', age: 30, email: 'lisi@example.com' });
    worksheet.addRow({ name: '王五', age: 28, email: 'wangwu@example.com' });

    // 设置响应头，指定下载的文件类型和文件名
    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    res.setHeader('Content-Disposition', 'attachment; filename=data.xlsx');

    // 写入 Excel 文件并发送给客户端
    await workbook.xlsx.write(res);
    res.end();
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

上述代码中，我们创建了一个简单的 Express 服务，并提供了一个 /export 路由。当客户端请求这个路由时，我们使用 exceljs 库创建一个新的工作簿和工作表，添加数据，并将生成的 Excel 文件发送到客户端。

二、前端实现

接下来，我们来实现前端部分，使用 React 作为示例。我们可以通过按钮点击来请求后端的 Excel 文件下载。

// App.js
import React from 'react';

function App() {
    const handleExport = () => {
        // 发起请求下载 Excel 文件
        fetch('http://localhost:3000/export')
            .then(response => {
                if (response.ok) {
                    return response.blob();
                }
                throw new Error('网络错误');
            })
            .then(blob => {
                // 创建 URL 对象
                const url = window.URL.createObjectURL(new Blob([blob]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;

                // 指定文件名
                a.download = 'data.xlsx';
                document.body.appendChild(a);
                a.click();

                // 清理
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            })
            .catch(error => {
                console.error('导出失败:', error);
            });
    };

    return (
        <div>
            <h1>Excel 导出示例</h1>
            <button onClick={handleExport}>导出 Excel</button>
        </div>
    );
}

export default App;

在上面的代码中，当用户点击“导出 Excel”按钮时，我们会向后端发起请求。收到 Blob 数据后，我们将其转化为一个链接，并创建一个隐藏的 <a> 标签，自动触发下载。

总结

在这个示例中，我们展示了如何在 Node.js + Express 的后端生成 Excel 文件，并通过前端的 React 应用实现文件下载。虽然示例简单，但它展示了从后端生成文件到前端下载的完整流程。通过这种方式，你可以按需导出各种数据至 Excel，满足不同的业务场景。