在日常办公和数据处理过程中，Excel 文件因其强大的数据存储、分析和可视化功能而被广泛使用。然而，在共享或归档时，Excel 格式可能因设备、版本或平台的不同而导致文件内容显示不一致。因此，将 Excel 转换为 PDF 格式成为一种理想的选择。PDF 以其稳定性和跨平台的兼容性，能够确保文件内容在任何设备上都保持一致，且易于打印和分享。此外，PDF 文件还支持加密和数字签名，进一步增强了文档的安全性和可靠性。这篇文章将介绍如何使用 Spire.XLS for JavaScript 在 React 中将 Excel 文档转换为 PDF 格式。
- 将整个 Excel 工作簿转换为 PDF
- 将特定 Excel 工作表转换为 PDF
- 在转换工作表为 PDF 时适配页面为一页
- 在转换工作表为 PDF 时自定义页面边距
- 在转换工作表为 PDF 时指定页面大小
- 将特定单元格区域转换为 PDF
安装 Spire.XLS for JavaScript
要在 React 应用中实现 Excel 到 PDF 的转换，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：
npm i spire.office下载的产品包整合了Spire.Doc for JavaScript，Spire.XLS for JavaScript，Spire.PDF for JavaScript，Spire.Presentation for JavaScript，使用Spire.XLS for JavaScript的功能需将相应（ spire.xls.js，Spire.Xls.Wasm.zip，spire.common.js，Spire.Common.Wasm.zip，_framework 文件复制到项目的 public 文件夹中。同时为了确保文本渲染，相关使用字体文件可自定义路径添加。以下示例中，字体添加路径为：public\static\font。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
将整个 Excel 工作簿转换为 PDF
将整个 Excel 工作簿转换为 PDF，可以将所有工作表整合为一个通用的文件格式，方便共享和存档。使用 Spire.XLS for JavaScript 的 Workbook.SaveToFile() 方法，可以将整个工作簿直接保存为 PDF 格式，确保数据和格式的一致性。核心步骤如下：
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.SaveToFile() 方法将 Excel 文件保存为 PDF。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// Load Spire.XLS
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);
}
})();
}, []);
// Function convert Excel to PDF
const ExcelToPDF = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;React 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://localhost:3000。
点击“转换”就能下载转换的 PDF 文件。
将特定 Excel 工作表转换为 PDF
若只需将某个特定工作表转换为 PDF，可以使用 Spire.XLS for JavaScript 的 Worksheet.SaveToPdf()方法。此方法能够高效地导出指定工作表，帮助优化报告生成和数据共享流程。
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.SaveToPdf()方法将工作表保存为 PDF。
- JavaScript
import React,{useState,useEffect}from 'react';function App(){const [wasmModule,setWasmModule] = useState(null);// Load Spire.XLS useEffect(() =>{(async () =>{try{const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import( `${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);}})();},[]);// Function convert Excel to PDF const ExcelToPDF = async () =>{const wasmModule = window.wasmModule.spirexls;if (wasmModule){// 将字体加载到虚拟文件系统（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});// 获取第二个工作表 let sheet = workbook.Worksheets.get(1);// 指定输出PDF文件路径 const outputFileName = sheet.Name + '.pdf';// 将工作簿保存为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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;
在转换工作表为 PDF 时适配页面为一页
将工作表内容适配至单页，可以提高 PDF 的可读性，尤其适用于包含大量数据的工作表。Spire.XLS for JavaScript 提供了 Workbook.ConverterSetting.SheetFitToPage属性，用户可以通过此属性设置是否将工作表内容缩放为适合单页显示。
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 通过将 Workbook.ConverterSetting.SheetFitToPage属性设置为 true，将工作表适配到一页。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.SaveToPdf()方法将工作表保存为 PDF。
- JavaScript
import React,{useState,useEffect}from 'react';function App(){const [wasmModule,setWasmModule] = useState(null);// Load Spire.XLS useEffect(() =>{(async () =>{try{const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import( `${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);}})();},[]);// Function convert Excel to PDF const ExcelToPDF = async () =>{const wasmModule = window.wasmModule.spirexls;if (wasmModule){// 将字体加载到虚拟文件系统（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});// 将工作表调整为适合一页显示 workbook.ConverterSetting.SheetFitToPage = true;// 获取第一个工作表 let sheet = workbook.Worksheets.get(0);// 指定输出PDF文件路径 const outputFileName = '适配一页.pdf';// 将工作簿保存为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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;在转换工作表为 PDF 时自定义页面边距
自定义页面边距能有效确保工作表内容在 PDF 中的对齐和排版，提升文件的视觉效果。通过使用 Worksheet.PageSetup.TopMargin、Worksheet.PageSetup.BottomMargin、Worksheet.PageSetup.LeftMargin和 Worksheet.PageSetup.RightMargin属性，用户可以根据需要调整或去除页面的边距设置。
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PageMargins属性调整工作表的页面边距。
- 使用 Worksheet.SaveToPdf()方法将工作表保存为 PDF。
- JavaScript
import React,{useState,useEffect}from 'react';function App(){const [wasmModule,setWasmModule] = useState(null);// Load Spire.XLS useEffect(() =>{(async () =>{try{const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import( `${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);}})();},[]);// Function convert Excel to PDF const ExcelToPDF = async () =>{const wasmModule = window.wasmModule.spirexls;if (wasmModule){// 将字体加载到虚拟文件系统（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});// 获取第一个工作表 let sheet = workbook.Worksheets.get(0);// 调整页面边距 sheet.PageSetup.TopMargin = 0.5;sheet.PageSetup.BottomMargin = 0.5;sheet.PageSetup.LeftMargin = 0.3;sheet.PageSetup.RightMargin = 0.3;// 指定输出PDF文件路径 const outputFileName = '自定义页边距.pdf';// 将工作簿保存为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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;在转换工作表为 PDF 时指定页面大小
在将工作表转换为 PDF 时，选择合适的页面大小对于符合特定的打印和提交标准至关重要。Spire.XLS for JavaScript 提供了 Worksheet.PageSetup.PaperSize属性，允许用户选择预定义的页面大小或自定义页面尺寸，以满足不同需求。
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PaperSize属性设置工作表的页面大小。
- 使用 Worksheet.SaveToPdf()方法将工作表保存为 PDF。
- JavaScript
import React,{useState,useEffect}from 'react';function App(){const [wasmModule,setWasmModule] = useState(null);// Load Spire.XLS useEffect(() =>{(async () =>{try{const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import( `${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);}})();},[]);// Function convert Excel to PDF const ExcelToPDF = async () =>{const wasmModule = window.wasmModule.spirexls;if (wasmModule){// 将字体加载到虚拟文件系统（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});// 获取第一个工作表 let sheet = workbook.Worksheets.get(0);// 设置工作表的页面大小 sheet.PageSetup.PaperSize = wasmModule.PaperSizeType.PaperA3;// 指定输出PDF文件路径 const outputFileName = '指定页面大小.pdf';// 将工作簿保存为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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;将特定单元格区域转换为 PDF
将选定的单元格区域转换为 PDF 可精确导出工作表中的关键数据，非常适合重点报告或数据共享。通过设置 Worksheet.PageSetup.PrintArea属性，用户可以指定需要转换的单元格区域，确保输出内容简洁而精准。
- 加载字体文件以确保正确的文本呈现。
- 使用 new wasmModule.Workbook()方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile()方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index)方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PrintArea属性指定要转换的工作表单元格区域。
- 使用 Worksheet.SaveToPdf()方法将工作表保存为 PDF。
- JavaScript
import React,{useState,useEffect}from 'react';function App(){const [wasmModule,setWasmModule] = useState(null);// Load Spire.XLS useEffect(() =>{(async () =>{try{const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import( `${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);}})();},[]);// Function convert Excel to PDF const ExcelToPDF = async () =>{const wasmModule = window.wasmModule.spirexls;if (wasmModule){// 将字体加载到虚拟文件系统（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});// 获取第一个工作表 let sheet = workbook.Worksheets.get(0);// 设置工作表的打印区域 sheet.PageSetup.PrintArea = "B5:E17";// 指定输出PDF文件路径 const outputFileName = '单元格区域.pdf';// 将工作簿保存为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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>使用JavaScript在React中将Excel文件转换为PDF</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>转换 </button></div>);}export default App;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
