在日常办公和数据处理过程中，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.xls安装完成后，将 Spire.Xls.Base.js 和 Spire.Xls.Base.wasm 文件复制到项目的 public 文件夹中。此外，为确保文本的正确呈现，还需要添加所需的字体文件。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
将整个 Excel 工作簿转换为 PDF
将整个 Excel 工作簿转换为 PDF，可以将所有工作表整合为一个通用的文件格式，方便共享和存档。使用 Spire.XLS for JavaScript 的 Workbook.SaveToFile() 方法，可以将整个工作簿直接保存为 PDF 格式，确保数据和格式的一致性。核心步骤如下：
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.SaveToFile() 方法将 Excel 文件保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 指定输出PDF文件路径
const outputFileName = 'ToPDF.pdf';
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的Excel文档
workbook.LoadFromFile({fileName: inputFileName});
// 将工作簿保存为PDF
workbook.SaveToFile({fileName: outputFileName , fileFormat: wasmModule.FileFormat.PDF});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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() 方法。此方法能够高效地导出指定工作表，帮助优化报告生成和数据共享流程。
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.SaveToPdf() 方法将工作表保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的Excel文档
workbook.LoadFromFile({fileName: inputFileName});
// 获取第二个工作表
let sheet = workbook.Worksheets.get(1);
// 指定输出PDF文件路径
const outputFileName = sheet.Name + '.pdf';
// 将工作表保存为PDF
sheet.SaveToPdf({fileName: outputFileName});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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 属性，用户可以通过此属性设置是否将工作表内容缩放为适合单页显示。
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 通过将 Workbook.ConverterSetting.SheetFitToPage 属性设置为 true，将工作表适配到一页。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.SaveToPdf() 方法将工作表保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的Excel文档
workbook.LoadFromFile({fileName: inputFileName});
// 将工作表调整为适合一页显示
workbook.ConverterSetting.SheetFitToPage = true;
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 指定输出PDF文件路径
const outputFileName = '适配一页.pdf';
// 将工作表保存为PDF
sheet.SaveToPdf({fileName: outputFileName});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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 属性，用户可以根据需要调整或去除页面的边距设置。
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PageMargins 属性调整工作表的页面边距。
- 使用 Worksheet.SaveToPdf() 方法将工作表保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的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
sheet.SaveToPdf({fileName: outputFileName});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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 属性，允许用户选择预定义的页面大小或自定义页面尺寸，以满足不同需求。
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PaperSize 属性设置工作表的页面大小。
- 使用 Worksheet.SaveToPdf() 方法将工作表保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的Excel文档
workbook.LoadFromFile({fileName: inputFileName});
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 设置工作表的页面大小
sheet.PageSetup.PaperSize = wasmModule.PaperSizeType.PaperA3;
// 指定输出PDF文件路径
const outputFileName = '指定页面大小.pdf';
// 将工作表保存为PDF
sheet.SaveToPdf({fileName: outputFileName});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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 属性，用户可以指定需要转换的单元格区域，确保输出内容简洁而精准。
- 加载字体文件以确保正确的文本呈现。
- 使用 wasmModule.Workbook.Create() 方法创建一个 Workbook 对象。
- 使用 Workbook.LoadFromFile() 方法加载 Excel 文件。
- 使用 Workbook.Worksheets.get(index) 方法获取特定的工作表。
- 使用 Worksheet.PageSetup.PrintArea 属性指定要转换的工作表单元格区域。
- 使用 Worksheet.SaveToPdf() 方法将工作表保存为 PDF。
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// 保存已加载的WASM模块
const [wasmModule, setWasmModule] = useState(null);
// 在组件挂载时加载WASM模块
useEffect(() => {
const loadWasm = async () => {
try {
// 通过全局窗口对象访问模块和spirexls
const { Module, spirexls } = window;
// 在初始化运行时设置wasmModule状态
Module.onRuntimeInitialized = () => {
setWasmModule(spirexls);
};
} catch (err) {
// 记录加载过程中出现的任何错误
console.error('加载WASM模块失败:', err);
}
};
// 创建一个script元素来加载WASM JavaScript文件
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
script.onload = loadWasm;
// 将script添加到文档的body中
document.body.appendChild(script);
// 在组件卸载时执行删除script的清理函数
return () => {
document.body.removeChild(script);
};
}, []);
// 执行将Excel文件转换为PDF的函数
const ExcelToPDF = async () => {
if (wasmModule) {
// 将ARIALUNI.TTF字体文件加载到虚拟文件系统（VFS）中
await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 将输入文件加载到虚拟文件系统（VFS）中
const inputFileName = '示例.xlsx';
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的工作簿
const workbook = wasmModule.Workbook.Create();
// 加载现有的Excel文档
workbook.LoadFromFile({fileName: inputFileName});
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 设置工作表的打印区域
sheet.PageSetup.PrintArea = "B5:E17";
// 指定输出PDF文件路径
const outputFileName = '单元格区域.pdf';
// 将工作表保存为PDF
sheet.SaveToPdf({fileName: outputFileName});
// 读取保存的文件并转换为Blob对象
const modifiedFileArray = wasmModule.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中将单元格范围转换为PDF</h1>
<button onClick={ExcelToPDF} disabled={!wasmModule}>
转换
</button>
</div>
);
}
export default App;申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
