在日常办公和数据处理过程中，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 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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
使用 javascript 在 react 中将 excel 转换为 pdf-ag凯发旗舰厅
);
}
export default app;react 应用程序编译成功后，将在默认网页浏览器中打开，通常是 。
点击“转换”就能下载转换的 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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
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.createobject;
const a = document.createelement('a');
a.href = url;
a.download = outputfilename;
document.body.appendchild(a);
a.click();
document.body.removechild(a);
url.revokeobject;
// 清理工作簿使用的资源
workbook.dispose();
}
};
return (
);
}
export default app;申请临时 license
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用javascript。获取有效期 30 天的临时许可证。
