将纯文本文件转换为 PDF，可以把简单的文本内容转换成具有固定页面布局的文档，从而更加方便地进行分享、存档、打印和分发。与 TXT 文件相比，PDF 还可以对页面尺寸、页边距、字体、文本对齐方式以及分页方式进行更加灵活的控制。
本文将介绍如何在 React 应用程序中使用 Spire.PDF for JavaScript 通过 JavaScript 将 TXT 文件转换为 PDF。此外，还将介绍一些常用的页面和文本设置，包括设置 PDF 页面尺寸和页边距、使用支持中文的自定义字体、更改文本对齐方式，以及控制文本在页面中的起始位置。
本文内容：
在 React 中配置 Spire.PDF for JavaScript
在开始处理 PDF 文件之前，需要先确保已经将 Spire.PDF for JavaScript 集成到 React 项目中，并且能够正常加载其 WebAssembly 模块。
如果尚未完成相关配置，可以参考教程：如何在 React 项目中集成 Spire.PDF for JavaScript。
下面的示例默认已经将所需的 JavaScript、WebAssembly 以及相关支持文件添加到了 React 项目的 public 目录中，并且可以通过以下方式访问 Spire.PDF 模块：
window.wasmModule.spirepdf
此外，本示例使用的源 TXT 文件也需要放置在应用程序 public 目录下可以访问的位置。
使用 JavaScript 将文本转换为 PDF
将 TXT 文件转换为 PDF 主要包含以下几个步骤。
首先，将 TXT 文件加载到 WebAssembly 虚拟文件系统（VFS）中，然后以字节形式读取文件内容，并将其解码为 JavaScript 字符串。
接下来，创建一个新的 PDF 文档并添加页面。可以使用 PdfTextWidget 将文本绘制到 PDF 页面中。通过启用 PdfTextLayout 的自动分页功能，当文本内容超出当前页面的可用区域时，可以自动继续绘制到后续页面，而不是只显示在第一页。
由于 PDF 内置字体（如 Helvetica）并不能完整支持中文字符，因此本示例加载 Microsoft YaHei（微软雅黑） 字体，并通过 PdfTrueTypeFont 创建支持 Unicode 的字体对象，以确保中文文本能够正确显示。
最后，将生成的 PDF 保存到虚拟文件系统中，再读取生成的 PDF 数据并转换为 Blob，从而允许用户直接在浏览器中下载文件。
以下代码演示了完整的实现过程：
import React, { useEffect, useState } from 'react';
function App() {
const [ready, setReady] = useState(false);
const [downloadUrl, setDownloadUrl] = useState(null);
const [downloadName, setDownloadName] = useState('');
useEffect(() => {
(async () => {
const publicUrl = process.env.PUBLIC_URL || '';
await import(/* webpackIgnore: true */ `${publicUrl}/spire.common.js`);
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setReady(true);
})();
}, []);
const textToPdf = async () => {
const wasmModule = window.wasmModule.spirepdf;
if (!wasmModule) return;
// 1. 将文本文件加载到虚拟文件系统（VFS）
const inputFileName = 'TextToPdf.txt';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL || ''}/`);
// 2. 读取 TXT 文件中的文本
const textByte = window.dotnetRuntime.Module.FS.readFile(inputFileName);
const text = new TextDecoder('utf-8').decode(textByte);
// 3. 创建 PDF 文档
const doc = new wasmModule.PdfDocument();
// 4. 添加一个 Section
const section = doc.Sections.Add();
// 5. 添加 PDF 页面
const page = section.Pages.Add();
// 6. 加载微软雅黑字体，并创建支持 Unicode 的 PdfTrueTypeFont
await window.spire.FetchFileToVFS(
'msyh.ttc',
'/Library/Fonts/',
`${process.env.PUBLIC_URL}/fonts/`
);
let font = new wasmModule.PdfTrueTypeFont({
fontFamily: 'Microsoft YaHei',
size: 12,
style: wasmModule.PdfFontStyle.Regular,
unicode: true
});
// 7. 设置文本格式
const format = new wasmModule.PdfStringFormat();
format.Alignment = wasmModule.PdfTextAlignment.Left;
format.LineSpacing = 20;
// 8. 设置文本颜色
const brush = wasmModule.PdfBrushes.get_Black();
// 9. 设置文本布局和分页方式
const textLayout = new wasmModule.PdfTextLayout();
textLayout.Break = wasmModule.PdfLayoutBreakType.FitPage;
textLayout.Layout = wasmModule.PdfLayoutType.Paginate;
// 10. 定义文本在 PDF 页面中的绘制区域
const bounds = new wasmModule.RectangleF({
location: new wasmModule.PointF(0, 0),
size: page.Canvas.ClientSize,
});
// 11. 创建 PdfTextWidget
const textWidget = new wasmModule.PdfTextWidget({ text, font, brush });
textWidget.StringFormat = format;
// 12. 将文本绘制到 PDF 页面中
const layoutWidget = new wasmModule.PdfLayoutWidget(textWidget.H);
layoutWidget.Draw({
page,
layoutRectangle: bounds,
format: textLayout
});
// 13. 定义输出文件名称
const outputFileName = 'TextToPdf_result.pdf';
// 14. 保存并关闭 PDF 文档
doc.SaveToFile(outputFileName);
doc.Close();
// 15. 读取生成的 PDF 文件，并转换为 Blob
const bytes = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([bytes], { type: 'application/pdf' });
// 16. 生成下载链接
setDownloadName(outputFileName);
setDownloadUrl(URL.createObjectURL(blob));
};
return (
<div style={{ textAlign: 'center', padding: 30 }}>
<h1>文本转 PDF</h1>
<span>点击下面的按钮将文本文件转换为 PDF 文档。</span>
<div style={{ marginTop: '20px' }}>
<button onClick={textToPdf} disabled={!ready}>
转换为 PDF
</button>
{downloadUrl && (
<div style={{ marginTop: '10px' }}>
<a href={downloadUrl} download={downloadName}>
点击此处下载生成的 PDF 文件
</a>
</div>
)}
</div>
</div>
);
}
export default App;
在上述示例中，TextDecoder 用于将 TXT 文件中的 UTF-8 字节数据转换为 JavaScript 字符串。
文本内容随后被传递给 PdfTextWidget，而 PdfLayoutWidget.Draw() 负责实际的文本布局和绘制。由于使用了 PdfLayoutType.Paginate，当文本内容超过第一页的可用区域时，剩余内容会自动继续绘制到后续页面。
输出效果：
PDF 页面和文本设置
设置 PDF 页面尺寸和页边距
在将较长的文本转换为 PDF 时，页面尺寸和页边距会直接影响每一页可以容纳的文本数量以及最终的版面效果。
例如，可以将 PDF 页面设置为 A4，并将上下左右四个方向的页边距均设置为 20 点：
const page = section.Pages.Add();
page.PageSettings.Size = wasmModule.PdfPageSize.A4;
page.PageSettings.Margins = new wasmModule.PdfMargins({
top: 20,
bottom: 20,
left: 20,
right: 20
});
页边距会缩小文本可使用的绘制区域，同时避免文本距离 PDF 页面边缘过近。
可以根据生成文档的实际用途调整这些数值。例如，报告、打印文档通常适合使用较大的页边距；如果希望每页容纳更多文本，则可以适当减小页边距。
使用支持中文的自定义字体
PDF 内置字体（如 Helvetica）主要适用于英文及部分西文字符，并不能完整支持中文字符。因此，在将包含中文内容的 TXT 文件转换为 PDF 时，需要加载支持中文和 Unicode 字符的 TrueType 字体。
本示例使用 Microsoft YaHei（微软雅黑） 字体。首先，将字体文件 msyh.ttc 加载到 WebAssembly 虚拟文件系统中：
await window.spire.FetchFileToVFS(
'msyh.ttc',
'/Library/Fonts/',
`${process.env.PUBLIC_URL}/fonts/`
);
然后通过 PdfTrueTypeFont 创建字体对象：
let font = new wasmModule.PdfTrueTypeFont({
fontFamily: 'Microsoft YaHei',
size: 12,
style: wasmModule.PdfFontStyle.Regular,
unicode: true
});
其中：
fontFamily 用于指定字体名称，这里使用 Microsoft YaHei。size 用于设置文本字号。style 用于设置字体样式，例如常规、粗体或斜体。unicode: true 用于启用 Unicode 字符支持，这对于正确显示中文字符非常重要。
在 React 项目中，可以将字体文件放置在：
public/fonts/
目录下，然后通过 FetchFileToVFS() 将其加载到 WebAssembly 环境中。
完成字体加载后，在创建 PdfTextWidget 时使用该字体，即可将中文文本正确绘制到 PDF 页面中：
const textWidget = new wasmModule.PdfTextWidget({
text,
font,
brush
});
除了微软雅黑之外，也可以根据实际需求使用其他支持中文字符的字体。无论选择哪种字体，都需要确保所使用的字体文件能够覆盖待转换文本中包含的字符。
更改文本对齐方式
文本的对齐方式可以通过 PdfStringFormat 进行控制。
例如，下面的代码将文本设置为两端对齐：
const format = new wasmModule.PdfStringFormat();
format.Alignment =
wasmModule.PdfTextAlignment.Justify;
可以根据文档的实际排版需求设置不同的文本对齐方式。
对于普通段落，左对齐通常比较适合中文文本；两端对齐也可以用于需要更加整齐版面的正文内容。标题、页眉或其他特殊文本则可以根据需要设置为居中或其他对齐方式。
同一个 PdfStringFormat 对象还可以用于控制行距，例如：
format.LineSpacing = 20;
适当增加行距可以提高长篇文本转换为 PDF 后的可读性。
控制文本在 PDF 页面中的起始位置
在 PDF 页面中绘制文本时，RectangleF 对象用于定义文本的布局区域。
其中，文本的起始位置由 PointF 对象控制：
const bounds = new wasmModule.RectangleF({
location: new wasmModule.PointF(0, y),
size: page.Canvas.ClientSize,
});
这里的 y 值用于控制文本起始位置与 PDF 页面顶部之间的距离。
例如：
location: new wasmModule.PointF(0, 30)
会将文本的起始位置向下移动 30 点。
当绘制区域使用 page.Canvas.ClientSize 时，通常建议将 x 坐标保持为 0 。
如果增加 x 坐标，但没有相应减小文本绘制区域的宽度，可能会导致左右两侧留白不一致。在某些情况下，靠近页面右侧的文本还可能超出有效绘制区域，从而出现内容被截断的问题。
因此，如果只是希望增加文本第一行与页面顶部之间的距离，更推荐仅调整 y 坐标：
const bounds = new wasmModule.RectangleF({
location: new wasmModule.PointF(0, 40),
size: page.Canvas.ClientSize,
});
这样可以让文本从距离默认顶部 (除去空白边缘) 位置 40 点的位置开始绘制，同时保留完整的页面可用宽度。
总结
在 React 应用程序中将纯文本转换为 PDF，并不只是简单地更改文件扩展名。首先需要读取并解码 TXT 文件中的文本，然后使用合适的字体、文本格式和页面布局规则将内容绘制到 PDF 页面中。
通过 Spire.PDF for JavaScript，可以直接在 React 应用程序中根据 TXT 内容生成 PDF，并进一步控制 页面尺寸、页边距、中文字体、文本对齐方式、行距、起始位置以及自动分页 等属性。
对于中文文本，由于 Helvetica 等 PDF 内置字体无法完整覆盖中文字符，还需要加载支持中文和 Unicode 的 TrueType 字体，例如微软雅黑，从而确保生成的 PDF 能够正确显示中文内容。
通过这些设置，可以将简单的纯文本内容转换为结构更加清晰、版面更加规范且便于分享和打印的 PDF 文档。
常见问题
可以使用 JavaScript 在 React 中将 TXT 文件转换为 PDF 吗？
可以。React 应用程序可以读取 TXT 文件中的文本内容，然后使用 Spire.PDF for JavaScript 等 JavaScript PDF 库创建 PDF 页面，并将文本绘制到页面中。
如何将较长的文本自动转换到多个 PDF 页面？
可以结合使用 PdfTextLayout 和 PdfLayoutType.Paginate。当当前页面没有足够空间容纳剩余文本时，PdfTextWidget 中的内容可以自动继续绘制到后续页面：
const textLayout = new wasmModule.PdfTextLayout();
textLayout.Break =
wasmModule.PdfLayoutBreakType.FitPage;
textLayout.Layout =
wasmModule.PdfLayoutType.Paginate;
将文本转换为 PDF 时可以指定页面尺寸吗？
可以。可以通过 PDF 页面的 PageSettings 设置页面尺寸。例如，下面的代码将页面尺寸设置为 A4：
page.PageSettings.Size =
wasmModule.PdfPageSize.A4;
还可以分别设置页面顶部、底部、左侧和右侧的页边距，以控制实际可用于绘制文本的区域。
为什么中文文本转换为 PDF 时需要使用自定义字体？
Helvetica 等 PDF 内置字体并不能完整支持中文字符。因此，在生成包含中文内容的 PDF 时，需要使用支持中文和 Unicode 的 TrueType 字体，例如 Microsoft YaHei。
首先将字体文件加载到 WebAssembly 虚拟文件系统：
await window.spire.FetchFileToVFS(
'msyh.ttc',
'/Library/Fonts/',
`${process.env.PUBLIC_URL}/fonts/`
);
然后创建启用了 Unicode 支持的 PdfTrueTypeFont：
let font = new wasmModule.PdfTrueTypeFont({
fontFamily: 'Microsoft YaHei',
size: 12,
style: wasmModule.PdfFontStyle.Regular,
unicode: true
});
这样可以确保中文字符在生成的 PDF 中被正确显示。
如何让文本从 PDF 页面更靠下的位置开始显示？
可以修改用于定义文本绘制区域的 PointF 对象中的 y 坐标：
const bounds = new wasmModule.RectangleF({
location: new wasmModule.PointF(0, 40),
size: page.Canvas.ClientSize,
});
y 值越大，文本距离 PDF 页面顶部的起始位置就越远。
获取免费许可证
如果您需要去除生成文档中的评估提示或解除功能限制，请联系我们获取有效期 30 天的临时许可证。
