现代 Web 应用程序经常需要直接在浏览器中生成可下载的 Excel 报表，而无需依赖后端服务。无论是构建数据仪表板、报表工具还是数据密集型业务应用程序，浏览器端的电子表格导出已成为前端开发的常见需求。

这一需求的挑战在于，如何在不同浏览器中创建兼容的 Excel 文件，同时保持格式、支持多种输出格式并确保快速下载——所有这些都不需要将敏感数据发送到服务器。传统方法通常需要复杂的服务器端处理，或者依赖于功能有限的客户端库。

Spire.XLS for JavaScript 使开发人员能够使用 WebAssembly 技术完全在浏览器中生成、导出并使用 JS 下载 Excel 文件。这种方法提供了真正的客户端 Excel 生成功能，支持多种格式，包括 XLS、XLSX、XLSB、ODS、PDF、XML 和 XPS。

本文将演示如何在现代 JavaScript 和 React 应用程序中使用浏览器端处理和 Spire.XLS for JavaScript 生成并下载 Excel 文件。内容涵盖基础文件生成、基于流的导出、React 集成以及 HTML 表格转换，并提供实用的代码示例。

快速导航

• 为什么要在浏览器中导出 Excel
• 安装 Spire.XLS for JavaScript
• 在 JavaScript 中下载 Excel 文件
• 将 HTML 表格导出为 Excel
• React JS 导出 Excel 示例
• 关于客户端 Excel 导出
• 故障排除
• 总结
• 常见问题

为什么要在浏览器中导出 Excel

与传统的服务器端方法相比，浏览器端 Excel 导出具有显著优势：

• 增强隐私保护 – 敏感数据永远不会离开客户端设备，降低安全风险并减少合规性问题
• 更快的下载速度 – 消除服务器往返请求，减少延迟并改善用户体验
• 无需服务器端处理 – 降低后端基础设施成本并消除服务器瓶颈
• 支持离线工作 – 即使没有网络连接，客户端生成功能也能正常运行
• 可扩展架构 – 每个用户的浏览器处理自己的导出任务，分散计算负载
• 框架无关 – 可与 React、Vue、Angular 和原生 JavaScript 应用程序无缝协作

通过在浏览器中实现 Excel 导出功能，开发人员可以创建响应迅速、安全且经济高效的解决方案，这些方案能够随用户需求自然扩展。

安装 Spire.XLS for JavaScript

在 JavaScript 中生成和下载 Excel 文件之前，需要安装 Spire.XLS for JavaScript 并在开发环境中进行配置。

通过 npm 安装

可以使用 npm 安装 Spire.XLS for JavaScript：

npm i spire.xls

安装完成后，在项目中引入该库：

import { Workbook } from '@e-iceblue/spire.xls';

注意：当前的 WebAssembly 运行时通过 spire.office 包结构在内部提供，即使从 npm 安装 spire.xls 也是如此。这就是为什么初始化导入引用的是 /node_modules/spire.office/。

手动安装

也可以从 e-iceblue 网站下载软件包，并将依赖项复制到项目目录中。

有关详细的设置说明，请参阅 Spire.XLS for JavaScript 入门指南。

初始化 WASM 模块

在使用 Spire.XLS 之前，必须初始化 WebAssembly 模块。初始化过程会加载所需资源并设置运行时环境：

// 首先导入并初始化公共模块
import('/node_modules/spire.office/spire.common.js').then(async (commonModule) => {
    // 初始化 WASM 运行时
    await commonModule.initializeWasm();
    
    // 加载 XLS 模块
    await import('/node_modules/spire.office/spire.xls.js');
    
    console.log('Spire.XLS 已就绪');
});

重要说明：

• 在访问 window.spirexls 或 window.xlswasm 之前必须进行初始化
• 浏览器会在首次加载时下载所需的 WebAssembly 资源
• 在执行 Excel 操作之前，务必验证模块是否存在
• 本文使用 spire.office v11.4.1+ 版本。模块通过 window.spirexls 或 window.xlswasm 访问。

Spire.XLS for JavaScript 可与所有主流前端框架和构建工具无缝集成：

• React – 与（useState、useEffect）配合使用，实现状态驱动的 Excel 导出组件
• Vue.js – 与 Vue 的响应式数据系统和生命周期方法集成
• Angular – 兼容 Angular 服务和依赖注入模式
• 原生 JavaScript 及现代 Web 特性 – 支持 ES Modules、Blob、File API 等浏览器原生能力，可灵活集成到各类 Web 应用中

WebAssembly 模块在应用程序初始化时加载一次，并可在多个组件之间共享，这使得它对于多页面应用程序非常高效，无论选择哪种框架。

在 JavaScript 中下载 Excel 文件

以下示例演示如何使用 Spire.XLS for JavaScript 生成 Excel 文件并直接在浏览器中下载。

创建并下载 XLSX 文件

// 确保 WASM 模块已初始化
if (!window.spirexls && !window.xlswasm) {
    console.error("Spire.XLS 未初始化。");
    return;
}

// 获取已初始化的 WebAssembly 模块
const wasmModule = window.spirexls || window.xlswasm;

// 创建新工作簿
const workbook = new wasmModule.Workbook();
const worksheet = workbook.Worksheets.get(0);

// 创建示例数据
const products = [
    ["产品", "数量", "价格"],
    ["笔记本电脑", 10, 999.99],
    ["鼠标", 50, 24.99]
]

// 将数据插入工作表
for (let i = 0; i < products.length; i++) {
    for (let j = 0; j < products[i].length; j++) {
        if (typeof products[i][j] === "string") {
            worksheet.Range.get({ row: i + 1, column: j + 1 }).Text = products[i][j];
        }
        else {
            worksheet.Range.get({ row: i + 1, column: j + 1 }).NumberValue = products[i][j];
        }
    }
}

// 添加总计列
worksheet.Range.get({ row: 1, column: products[0].length + 1 }).Text = "总计";
worksheet.Range.get({ row: 2, column: products[0].length + 1 }).Formula = "=B2*C2";
worksheet.Range.get({ row: 3, column: products[0].length + 1 }).Formula = "=B3*C3";

// 将工作簿保存到虚拟文件系统 (VFS)
const outputFileName = "Report.xlsx";

workbook.SaveToFile({
    fileName: outputFileName,
    version: wasmModule.ExcelVersion.Version2016
});

// 释放工作簿资源
workbook.Dispose();

// 从 VFS 读取生成的文件
const fileArray =
    window.dotnetRuntime.Module.FS.readFile(outputFileName);

// 创建 Blob 对象
const excelBlob = new Blob(
    [fileArray],
    {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    }
);

// 触发浏览器下载
const url = URL.createObjectURL(excelBlob);
const a = document.createElement("a");
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

以下是生成的 XLSX 文件预览：

导出流程工作原理

1. 创建工作簿并填充工作表数据
2. 将工作簿保存到 WebAssembly 虚拟文件系统 (VFS)
3. 从 VFS 读取生成的 XLSX 文件
4. 将文件数据转换为 Blob 对象
5. 使用临时 URL 触发浏览器下载

关于虚拟文件系统 (VFS)

SaveToFile() 生成的文件存储在 WebAssembly 虚拟文件系统中，而不是用户的物理磁盘上。这种内存文件系统允许 Spire.XLS 在浏览器环境中安全地执行标准文件操作。下载后的 XLSX 文件是在从 VFS 读取生成的文件数据并将其转换为浏览器 Blob 对象后创建的。

此方法的优势

• 完全在浏览器中运行
• 无需服务器端处理
• 使用标准的浏览器 Blob 下载 API
• 支持使用 Spire.XLS 直接生成并格式化 XLSX 文件

如需处理轻量级数据交换格式，可以进一步探索 如何使用 JavaScript 将 Excel 文件转换为 CSV 并将 CSV 数据导入 Excel。

在 JavaScript 中将 HTML 表格导出为 Excel

在仪表板和报表应用程序中，业务数据通常以 HTML 表格的形式显示。与其手动重建电子表格结构，不如使用 Spire.XLS for JavaScript 直接将现有的前端表格转换为 Excel 工作簿。

以下示例演示了一个完整的浏览器端工作流程，该流程：

• 从页面读取现有的 HTML 表格
• 将 HTML 表格转换为 Excel 工作簿
• 应用 Excel 原生格式
• 直接在浏览器中下载生成的 XLSX 文件

HTML 表格导出示例

async function exportTableToExcel() {

    if (!window.spirexls && !window.xlswasm) {
        alert("Spire.XLS 模块尚未加载。");
        return;
    }

    const button = document.getElementById("exportBtn");

    button.disabled = true;
    button.innerText = "正在导出...";

    const wasmModule = window.spirexls || window.xlswasm;

    try {

        // 获取 HTML 表格
        const tableHtml =
            document.getElementById("salesTable").outerHTML;

        // 移除内联样式
        const safeTableHtml =
            tableHtml.replace(/style="[^"]*"/g, '');

        const htmlContent = `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
            </head>
            <body>
                ${safeTableHtml}
            </body>
            </html>
        `;

        const htmlFileName = "Table.html";

        window.dotnetRuntime.Module.FS.writeFile(
            htmlFileName,
            htmlContent
        );

        const workbook = new wasmModule.Workbook();

        workbook.LoadFromHtml(htmlFileName);

        const sheet = workbook.Worksheets.get(0);

        const lastRow = Number(sheet.LastRow);
        const lastCol = Number(sheet.LastColumn);

        const headerRow =
            sheet.Range.get_Item(1, 1, 1, lastCol);

        headerRow.BuiltInStyle =
            wasmModule.BuiltInStyles.Heading3;

        for (let i = 2; i <= lastRow; i++) {

            const row =
                sheet.Range.get_Item(i, 1, i, lastCol);

            row.BuiltInStyle =
                i % 2 === 0
                    ? wasmModule.BuiltInStyles.Accent3_20
                    : wasmModule.BuiltInStyles.Accent3_60;
        }

        for (let j = 1; j <= lastCol; j++) {
            sheet.AutoFitColumn(j);
        }

        const outputFileName = "SalesReport.xlsx";

        workbook.SaveToFile({
            fileName: outputFileName,
            version: wasmModule.ExcelVersion.Version2016
        });

        workbook.Dispose();

        const fileData =
            window.dotnetRuntime.Module.FS.readFile(outputFileName);

        const blob = new Blob([fileData], {
            type:
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });

        const url = URL.createObjectURL(blob);

        const a = document.createElement("a");

        a.href = url;
        a.download = outputFileName;

        document.body.appendChild(a);
        a.click();

        document.body.removeChild(a);

        URL.revokeObjectURL(url);

    } catch (error) {

        alert("导出失败：" + error.message);

    } finally {

        button.disabled = false;
        button.innerText = "导出 Excel";
    }
}

以下截图展示导出前在浏览器中显示的基于 HTML 的销售报表表示例。

导出后，生成的 Excel 工作簿保留了表格结构并应用了额外的 Excel 原生格式。

为什么使用基于 HTML 的 Excel 导出

使用基于 HTML 的导出为现代 Web 应用程序提供了多项优势：

• 重用现有的前端表格，无需重建电子表格布局
• 减少重复的数据格式化和导出逻辑
• 在导入 HTML 表格后应用 Excel 原生样式
• 直接从仪表板页面导出业务报表

借助 Spire.XLS for JavaScript，可以快速将浏览器渲染的 HTML 表格转换为可下载的 Excel 文件，同时保持整个导出工作流程在客户端完成。

在 React 中使用 JavaScript 导出 Excel

将 Excel 导出功能集成到 React 应用程序中非常简单。关键是在渲染 React 组件之前初始化 WebAssembly 运行时，并在导出操作后正确释放工作簿资源。

在 React 中初始化 Spire.XLS

在创建导出组件之前，需要在应用程序入口文件（main.jsx 或 index.js）中初始化 WebAssembly 模块：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

// 在挂载 React 之前初始化 Spire.XLS
const initializeSpire = async () => {

    // 加载公共运行时
    const commonModule = await import(
        '/node_modules/spire.office/spire.common.js'
    );

    // 初始化 WebAssembly 运行时
    await commonModule.initializeWasm();

    // 加载 Spire.XLS 模块
    await import(
        '/node_modules/spire.office/spire.xls.js'
    );

    // 可选：如果需要预加载字体
    // await window.spire.FetchFileToVFS(
    //     'ARIAL.TTF',
    //     '/Library/Fonts/',
    //     '/'
    // );
};

// 初始化完成后启动 React 应用
initializeSpire().then(() => {

    createRoot(document.getElementById('root')).render(
        <StrictMode>
            <App />
        </StrictMode>
    );

});

然后在应用程序中使用下面的 React 导出组件。

简化的 React Excel 导出组件

以下是一个最小的 React 组件，演示了核心导出模式：

import { useState } from 'react'

const ExcelExportButton = () => {
    const [isProcessing, setIsProcessing] = useState(false);

    const handleExport = async () => {
        if ((!window.spirexls && !window.xlswasm) || isProcessing) return;

        setIsProcessing(true);
        const wasmModule = window.spirexls || window.xlswasm;

        try {
            // 创建新工作簿并获取第一个默认工作表
            const workbook = new wasmModule.Workbook();
            const worksheet = workbook.Worksheets.get(0);

            // 将数据插入工作表
            worksheet.Range.get("A1").Text = "产品";
            worksheet.Range.get("B1").Text = "收入";
            worksheet.Range.get("A2").Text = "笔记本电脑";
            worksheet.Range.get("B2").NumberValue = 9999.90;
            worksheet.Range.get("A3").Text = "智能手机";
            worksheet.Range.get("B3").NumberValue = 4999.99;

            const outputFileName = "Report.xlsx";

            // 将工作簿保存到 VFS 中的文件
            workbook.SaveToFile({
                fileName: outputFileName,
                version: wasmModule.ExcelVersion.Version2016
            });

            workbook.Dispose();

            const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

            const excelBlob = new Blob([fileArray], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            });

            const url = URL.createObjectURL(excelBlob);

            const a = document.createElement('a');
            a.href = url;
            a.download = outputFileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);

            URL.revokeObjectURL(url);

        } catch (error) {
            console.error("Excel 导出失败：", error);
        } finally {
            setIsProcessing(false);
        }
    };

    return (
        <button onClick={handleExport} disabled={isProcessing}>
            {isProcessing ? "正在生成..." : "导出到 Excel"}
        </button>
    );
}

export default function App() {
    return (
        <div>
            <h1>Spire.XLS 演示</h1>
            <ExcelExportButton />
        </div>
    );
}

关键实现细节：

• 最小化状态 – 仅跟踪 isProcessing 以在导出期间禁用按钮
• 直接下载 – 立即触发下载，无需在状态中存储 URL
• 资源清理 – 始终对工作簿对象调用 Dispose() 以防止内存泄漏
• 错误处理 – 将导出逻辑包装在 try-catch 块中以实现健壮的错误管理
• 加载状态 – 在处理期间禁用按钮以防止重复导出

在应用中使用：

import { ExcelExportButton } from './ExcelExportButton';

function App() {
    return (
        <div>
            <h1>销售仪表板</h1>
            <ExcelExportButton />
        </div>
    );
}

这种简化的方法专注于基本的导出流程，没有不必要的复杂性。对于更高级的场景（如加载外部文件或字体），请参考完整文档。

如需了解浏览器端文档分发工作流程，可以进一步探索 如何在 JavaScript 和 React 应用程序中将 Excel 文件转换为 PDF。

使用 JavaScript 无需后端生成 Excel 文件

现代 Web 应用程序越来越多地直接在浏览器中生成 Excel 文件，而不是依赖后端服务。借助 Spire.XLS for JavaScript，电子表格创建、格式化和导出操作完全使用 WebAssembly 在客户端运行。

为什么可以不需要后端服务器

传统的 Excel 导出工作流程通常需要服务器来：

1. 接收前端数据
2. 生成电子表格文件
3. 返回可下载的文件给浏览器

使用基于 WebAssembly 的处理，这些步骤完全在浏览器运行时中进行。

客户端 Excel 导出的优势

与传统的服务器端导出工作流程相比，客户端 Excel 生成具有以下优势：

工作原理

使用 Spire.XLS for JavaScript 时：

1. WebAssembly 运行时在浏览器中加载
2. 电子表格处理在内存中本地运行
3. 文件暂时存储在浏览器虚拟文件系统 (VFS) 中
4. JavaScript 将生成的文件转换为可下载的 Blob
5. 浏览器直接触发下载

这种架构使得基于浏览器的 Excel 导出特别适用于仪表板、报表系统、内部业务工具和注重隐私的应用程序。

故障排除和最佳实践

在浏览器环境中使用 Spire.XLS for JavaScript 时，可能会遇到以下问题。

WASM 模块未初始化

如果 window.spirexls 或 window.xlswasm 未定义，请确保在使用 API 之前完全初始化 WebAssembly 运行时：

await commonModule.initializeWasm();
await import('/node_modules/spire.office/spire.xls.js');

缺少资源或 ZIP 加载错误

如果浏览器控制台显示 404 错误或 WebAssembly 加载失败：

• 确保 ZIP 和 WASM 资源放置在正确的静态目录中
• Vite 项目应将资产放置在 public/ 文件夹中
• 验证浏览器是否可以成功加载 .zip 和 .wasm 文件

字体相关警告

某些环境可能会显示如下警告：

"Arial 字体未安装"

可以在创建工作簿之前预加载字体：

await window.spire.FetchFileToVFS(
    'ARIAL.TTF',
    '/Library/Fonts/',
    '/'
);

无效或损坏的 XLSX 文件

如果 Excel 打开时显示修复警告，请在导出时明确指定 Excel 版本：

workbook.SaveToFile({
    fileName: outputFileName,
    version: wasmModule.ExcelVersion.Version2016
});

内存管理

导出后务必释放工作簿资源，以避免长时间运行的应用程序中出现内存泄漏：

const workbook = new wasmModule.Workbook();

try {
    // Excel 操作
} finally {
    workbook.Dispose();
}

浏览器端性能考虑

对于非常大的数据集，浏览器端处理可能会变得缓慢或占用大量内存。在这种情况下：

• 在导出期间显示加载指示器
• 避免在单个操作中导出极大数据集
• 考虑为企业级报表使用服务器端处理

总结

Spire.XLS for JavaScript 提供了一种实用的方法，可以使用 JavaScript 和 WebAssembly 在现代 Web 应用程序中直接生成和导出 Excel 文件。其基于浏览器的架构使其适用于仪表板、报表系统以及需要在不依赖后端服务的情况下生成可下载电子表格的前端应用程序。

本文中的示例演示了如何使用 JavaScript、React 和 WebAssembly 构建基于浏览器的 Excel 导出工作流程，同时将电子表格处理完全保持在客户端。可以 申请 30 天免费许可证 在购买前评估所有功能。

常见问题

Q1：是否可以在没有后端服务器的情况下使用 JavaScript 下载 Excel 文件？

A1：可以。Spire.XLS for JavaScript 使用 WebAssembly 技术完全在浏览器中生成和下载 Excel 文件。工作簿在浏览器内存中创建并直接下载，无需任何后端 API 或服务器端处理。

Q2：如何在 JavaScript 中将 HTML 表格导出为 Excel？

A2：可以从 DOM 中提取现有的 HTML 表格，将 HTML 写入 WebAssembly 虚拟文件系统，并使用 LoadFromHtml() 将其加载到工作簿中。这种方法允许重用浏览器渲染的表格，而无需手动重建电子表格布局。

Q3：是否可以在 React 应用程序中使用 Spire.XLS for JavaScript？

A3：可以。Spire.XLS for JavaScript 可与 React、Vite 和其他现代前端框架配合使用。只需要在渲染组件之前初始化 WebAssembly 模块，然后直接在 React 组件或实用函数中执行 Excel 操作。

Q4：为什么 Excel 在打开导出的文件时显示修复警告？

A4：这通常发生在导出时未明确指定 Excel 版本的情况下。为避免兼容性问题，请在调用 SaveToFile() 时指定输出版本：

workbook.SaveToFile({
    fileName: outputFileName,
    version: wasmModule.ExcelVersion.Version2016
});