React中使用JavaScript将Excel转换为PDF
作者：缺点内向
在日常数据处理和报表生成场景中，将 Excel 文件转换为 PDF 格式是一项常见需求。PDF 的跨平台兼容性和稳定的排版表现，使其成为文档共享和归档的理想选择。本文介绍如何利用 Spire.XLS for JavaScript 这个基于 WebAssembly 的库，在 React 应用中实现这一转换功能。
关于 Spire.XLS for JavaScript
Spire.XLS for JavaScript 是一个基于 WebAssembly 的 Excel 操作库，支持在浏览器端直接创建、读取、编辑和转换 Excel 文件，无需依赖 Microsoft Office 环境。它兼容主流的 React、Vue、Angular 等前端框架，并提供对 .xls、.xlsx、.xlsm 等格式的支持。
在 PDF 转换方面，该库提供了 Workbook.SaveToFile() 和 Worksheet.SaveToPdf() 等方法，支持将整个工作簿或单个工作表导出为 PDF，并可控制页面适配等输出设置。
环境配置
安装依赖
通过 npm 安装 Spire.XLS for JavaScript：
npm i spire.office
安装完成后，需要将依赖文件复制到 React 项目的 public 文件夹中。具体需要复制的文件包括 spire.xls.js、Spire.Xls.Wasm.zip、spire.common.js、Spire.Common.Wasm.zip 以及 _framework 目录。同时，为保证 PDF 中文本的正确渲染，还需准备所需的字体文件（如 Arial.ttf）并放置到可访问的路径。
初始化 WASM 模块
在 React 组件中，需在组件挂载时加载并初始化 WebAssembly 模块：
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.xls.js WASM module:', error);
}
})();
}, []);
// 后续转换逻辑...
}
将整个工作簿转换为 PDF
将 Excel 文件的所有工作表一次性导出为单个 PDF 文件，适用于报表归档、数据分发等场景。
核心步骤如下：
- 将字体文件和目标 Excel 文件加载到虚拟文件系统（VFS）中。
- 创建
Workbook对象并加载 Excel 文件。 - 调用
Workbook.SaveToFile()方法，指定输出格式为 PDF。 - 从 VFS 读取生成的 PDF 文件，转换为 Blob 并触发下载。
示例代码：
const ExcelToPDF = async () => {
const wasmModule = window.wasmModule.spirexls;
if (!wasmModule) return;
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 指定输出PDF文件路径
const outputFileName = 'out.pdf';
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = 'ToPDF.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 加载现有的Excel文档
workbook.LoadFromFile({ fileName: inputFileName });
workbook.ConverterSetting.SheetFitToPage = true;
// 将工作簿保存为PDF
workbook.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.PDF });
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/pdf' });
// 为Blob创建一个URL并启动下载
const url = URL.createObjectURL(modifiedFile);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 清理工作簿使用的资源
workbook.Dispose();
};
将特定工作表转换为 PDF
如果仅需导出工作簿中的某一页（如汇总报表页），可先通过 Workbook.Worksheets.get() 方法获取目标工作表，再调用 SaveToFile() 方法。在保存时指定输出文件名，可以基于工作表名称动态命名。
const ExcelToPDF = async () => {
const wasmModule = window.wasmModule.spirexls;
if (!wasmModule) return;
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = 'ToPDF.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 创建一个新的工作簿
const workbook = new wasmModule.Workbook();
// 加载现有的Excel文档
workbook.LoadFromFile({ fileName: inputFileName });
// 获取第二个工作表（索引从0开始）
let sheet = workbook.Worksheets.get(1);
// 指定输出PDF文件路径（以工作表名称命名）
const outputFileName = sheet.Name + '.pdf';
// 将工作表保存为PDF
workbook.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.PDF });
// 读取并下载（代码同上）
// ...
workbook.Dispose();
};
需要注意的是，此方法保存的是整个工作簿，但 PDF 内容仅为选中工作表的数据。如果希望仅导出单个工作表且不包含其他工作表的空白页，建议将目标工作表复制到一个新的 Workbook 实例中再进行保存。
输出控制：工作表适配单页
对于宽表或行数较多的工作表，转换后可能会出现内容被拆分到多页的情况。通过设置 Workbook.ConverterSetting.SheetFitToPage = true，可让工作表内容自动缩放到一页内，提升 PDF 的可读性。
workbook.ConverterSetting.SheetFitToPage = true;
此设置对所有工作表生效，适合内容较多但希望单页展示的场景。
总结
综上所述，在 React 应用中实现 Excel 到 PDF 的转换，可以借助 Spire.XLS for JavaScript 这个基于 WebAssembly 的库在浏览器端完成。该方案不依赖后端服务，适合需要纯前端 Excel 处理能力的应用场景。根据实际需求，开发者既可以选择将整个工作簿输出为单一 PDF，也可以只导出指定的工作表，并通过调整页面适配属性来控制 PDF 的打印分页与内容缩放效果。整体来看，这套技术方案提供了一套较为完整的前端文件处理逻辑，可应用于数据展示、报表导出等常见业务场景中。
以上就是React中使用JavaScript将Excel转换为PDF的详细内容，更多关于React Excel转PDF的资料请关注脚本之家其它相关文章！