在日常办公和数据处理过程中，Excel 文件因其强大的数据存储、分析和可视化功能而被广泛使用。然而，在共享或归档时，Excel 格式可能因设备、版本或平台的不同而导致文件内容显示不一致。因此，将 Excel 转换为 PDF 格式成为一种理想的选择。PDF 以其稳定性和跨平台的兼容性，能够确保文件内容在任何设备上都保持一致，且易于打印和分享。此外，PDF 文件还支持加密和数字签名，进一步增强了文档的安全性和可靠性。这篇文章将介绍如何使用 Spire.XLS for JavaScript 在 React 中将 Excel 文档转换为 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。
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/`);
// 将输入文件加载到虚拟文件系统（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。
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/`);
// 将输入文件加载到虚拟文件系统（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。
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/`);
// 将输入文件加载到虚拟文件系统（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。
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/`);
// 将输入文件加载到虚拟文件系统（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。
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/`);
// 将输入文件加载到虚拟文件系统（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 天的临时许可证。
