如何在 JavaScript 中处理 PDF：顶级库、示例及日文字体修复

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 引言：为什么我们需要用 JavaScript 处理 PDF？

PDF 处理的重要性以及 JavaScript 的作用

近年来，PDF 已成为企业和个人使用的重要文件格式。各种文档——如合同、收据、发票和报告——通常以 PDF 格式创建。因此，在许多开发环境中，对自动化 PDF 生成和编辑的技术需求日益增加。

JavaScript 是一种直接在浏览器中运行的编程语言，擅长动态的客户端处理。通过利用这一特性，您可以高效地生成和编辑 PDF 文件。特别是，在不通过服务器的情况下在客户端完成处理的能力，近年来备受关注。

使用 JavaScript 处理 PDF 的优势

1. 减轻服务器负载

传统上，PDF 生成和编辑通常在服务器端处理。然而，通过使用 JavaScript，可以完全在客户端完成处理，从而显著减轻服务器的负担。

2. 实时处理

使用 JavaScript，可以即时将用户输入反映到 PDF 中。例如，您可以实现将表单输入立即转换为 PDF 并提供下载链接的功能。

3. 灵活的自定义

通过使用 JavaScript 库，您可以轻松创建高度可自定义的 PDF——如插入图形元素和图像，或指定文本格式。此外，由于 JavaScript 在大多数现代浏览器中运行，因此不太容易遇到环境依赖问题。

按用例的具体示例

1. 生成业务文档

您可以使用它构建自动生成发票或收据并通过电子邮件发送的系统。它还有助于提高运营效率，因为可以为每个业务合作伙伴即时输出自定义文档。

2. 导出表单数据

您可以实现将调查或申请表单中输入的数据保存为 PDF 格式并注册到管理系统中的功能。这有助于从基于纸张的文档管理更顺畅地过渡到数字管理。

3. 创建报告和材料

您可以从动态数据生成报告，并输出包含图表和图像的视觉上易懂的材料。这可以显著减少创建会议和演示文档所需的时间。

未来趋势和展望

JavaScript 中的 PDF 处理技术预计将持续发展。特别是，以下两点备受关注。

1. 更强的云集成 随着与云存储和数据库的集成变得更容易，预计对融入 PDF 生成和编辑功能的 Web 应用的需求将增长。
2. 改进的移动支持 随着智能手机和平板电脑上的可用性变得越来越重要，以响应式设计为导向的 PDF 生成功能的优化很可能将取得进展。

2. 处理 PDF 的五大 JavaScript 库（附比较表）

为什么在 JavaScript 中选择合适的 PDF 库很重要

在使用 JavaScript 生成或编辑 PDF 时，选择合适的库极其重要。使用合适的库，开发将更高效，高级自定义将更容易，并且可能支持日语。本节介绍五个主要的 PDF 处理库，并比较其功能和用例。

1. PDF.js

概述

PDF.js 是 Mozilla 开发的开源 PDF 查看器库。它主要专长于显示 PDF，并在浏览器中直接渲染它们。

主要功能

• 显示导向： 专用于渲染 PDF；不提供生成或编辑功能。
• 兼容性： 仅使用 HTML5 和 JavaScript 运行；无需额外插件。
• 性能： 快速渲染并高效处理大量页面。

示例用例

• 为电子书、合同和类似文档提供 PDF 查看器的应用程序。

2. jsPDF

概述

jsPDF 是一个轻量级库，专用于生成 PDF 文件。它非常适合简单文档创建，因为您可以轻松添加文本、图像和表格。

主要特性

• PDF 生成： 理想用于客户端 PDF 生成。
• 可扩展性： 可以通过插件扩展功能。
• 日语支持： 需要字体配置，但支持是可能的。

示例用例

• 自动生成收据和发票，或创建简单报告。

3. pdf-lib

概述

pdf-lib 是一个功能丰富的库，不仅支持生成，还支持编辑和合并。它还支持 TypeScript，非常适合现代开发环境。

主要特性

• 编辑： 在现有 PDF 中添加文本和图像。
• 自定义： 灵活的字体嵌入和布局控制。
• 性能： 快速处理，适合处理大规模数据。

示例用例

• 创建可填充 PDF 并从动态数据生成报告。

4. pdfmake

概述

pdfmake 是一个使用声明式 API 轻松指定布局的库。当您需要复杂设计或表格布局时，它非常理想。

主要特性

• 布局导向： 轻松创建表格并应用样式。
• 多语言支持： 可以使用基本的日语字体。
• 基于 JSON： 易于处理的数据结构，适合动态 PDF 生成。

示例用例

• 创建包含表格的报告、目录和文档。

5. html2pdf

概述

html2pdf 是一个将 HTML 元素直接转换为 PDF 的库。它适合将使用 HTML 和 CSS 设计的页面原样转换为 PDF。

主要特性

• 基于 HTML： 在保留 HTML/CSS 设计的同时生成 PDF。
• 易于采用： 可以快速实现简单输出。
• 响应式友好： 有助于在移动设备上保持外观一致。

示例用例

• 打印网页或导出具有固定布局的 PDF。

6. 比较表

总结

JavaScript PDF 库在目的和优势上有所不同。

• 如果您需要仅专注于渲染的轻量级查看器，请选择 PDF.js 。
• 对于简单 PDF 生成，jsPDF 是一个可靠的选择。
• 如果您需要编辑和更高级的功能，请选择 pdf-lib 。
• 对于表格和自定义布局，pdfmake 非常合适。
• 如果您想原样保留 HTML/CSS 设计，html2pdf 很方便。

通过为您的需求选择合适的库，您可以构建高效且灵活的 PDF 处理工作流程。

3. 实现示例：如何使用 JavaScript 生成和编辑 PDF

引言

使用 JavaScript，您可以轻松在客户端生成和编辑 PDF 文件。在本节中，我们使用主要库提供具体的实现示例。请参考这些示例运行代码。

1. 使用 jsPDF 进行基本 PDF 生成

仅使用文本创建 PDF

以下代码生成一个包含简单文本的 PDF 文件。

const doc = new jsPDF();
doc.text("Hello, PDF!", 10, 10);
doc.save("sample.pdf");

代码要点

1. 创建实例：

• new jsPDF() 创建一个新的 PDF 文档。

1. 添加文本：

• doc.text() 将字符串 “Hello, PDF!” 放置在坐标 (10, 10) 处。

1. 保存：

• doc.save() 以文件名 “sample.pdf” 触发下载。

高级示例：添加图片

要插入图片，请使用以下代码。

const doc = new jsPDF();
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 160);
doc.save("image-sample.pdf");

2. 使用 pdf-lib 编辑 PDF

示例：向已有 PDF 添加文本

import { PDFDocument } from 'pdf-lib';

async function modifyPDF() {
  const url = 'sample.pdf';
  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  firstPage.drawText('Added text', { x: 50, y: 500, size: 20 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "modified-sample.pdf", "application/pdf");
}

代码要点

1. 加载 PDF：

• PDFDocument.load() 用于加载已有的 PDF。

1. 编辑：

• drawText() 可在任意位置添加文本。

1. 保存和下载：

• 保存编辑后的 PDF 并下载。

3. 使用 pdfmake 创建布局丰富的 PDF

示例：构建具有复杂布局的 PDF

const docDefinition = {
  content: [
    { text: 'Report Title', style: 'header' },
    { text: 'Below is a sample table.' },
    {
      table: {
        body: [
          ['Item 1', 'Item 2', 'Item 3'],
          ['Data 1', 'Data 2', 'Data 3'],
          ['Data 4', 'Data 5', 'Data 6'],
        ],
      },
    },
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};
pdfMake.createPdf(docDefinition).download('sample-table.pdf');

代码要点

1. 定义内容：

• 在 content 中，你可以指定文本和表格。

1. 定义样式：

• 使用 styles 定义字体大小、加粗等样式。

1. 下载：

• download() 函数用于下载生成的 PDF。

4. 实现日文支持

嵌入日文字体（jsPDF）

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('Japanese support test', 10, 10);
doc.save("japanese-sample.pdf");

小结

在本节中，我们介绍了使用主流库进行 PDF 生成和编辑的实用示例。

• jsPDF： 轻松生成简易 PDF 并插入图片。
• pdf-lib： 支持编辑已有 PDF 和页面操作，功能非常灵活。
• pdfmake： 在表格和布局定制方面表现出色，并在一定程度上支持日文。

通过利用这些库，你可以构建满足各种需求的灵活 PDF 处理方案。

4. 处理日文字体及故障排除

介绍

在使用 JavaScript 生成 PDF 时，处理日文字体是许多开发者常遇到的挑战。尤其是日文字符（汉字、平假名、片假名）显示不正常或文字出现乱码的情况。本节将说明如何配置日文字体以及如何解决常见问题。

1. 常见的日文字体问题及其原因

为什么需要嵌入字体

仅包含英文文本的 PDF 通常使用标准字体即可正常显示，但日文字体需要特殊处理。原因如下：

• 日文字体字符集庞大，许多默认字体不包含它们。
• 不同的 JavaScript 库对日文字体的支持程度可能有限。
• 如果未嵌入字体文件，PDF 在不同的打开环境下可能会出现乱码。

典型错误示例

• 乱码文本: 字体未被正确识别，字符显示为 □ 或 ?。
• 布局破坏: 行间距或字体大小与预期不符。
• 字体加载错误: 自定义字体文件未能正确加载。

2. 如何在 jsPDF 中支持日文字体

准备字体文件

要在 PDF 中嵌入日文字体，需要使用 TrueType 字体（.ttf）。以下步骤以免费字体 “Noto Sans JP” 为例。

1. 下载字体文件: 从 Google Fonts 下载 “Noto Sans JP”。
2. 转换为 Base64: 使用工具将字体进行 Base64 编码并转换为 Base64 字符串。

代码示例

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('Hello, world!', 10, 10);
doc.save('japanese-sample.pdf');

代码要点

1. 添加字体数据:

• 使用 addFileToVFS 将 Base64 字体数据注册到虚拟文件系统中。

1. 配置字体:

• 使用 addFont 定义字体名称和样式。

1. 绘制文本:

• 在绘制文本之前使用 setFont 选择字体。

3. 如何在 pdfmake 中支持日文字体

字体准备与配置

pdfmake 需要显式配置字体。以下示例展示了使用 “Roboto” 字体的配置方式。

var fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Bold.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-BoldItalic.ttf',
  },
};

var docDefinition = {
  content: [
    { text: 'Japanese test', font: 'Roboto', fontSize: 14 },
    { text: 'Hello, World!', fontSize: 12 },
  ],
};

pdfMake.createPdf(docDefinition).download('japanese-sample.pdf');

关键说明

• 定义字体选项:
• 需要分别配置每种字体样式。
• 指定字体:
• 通过 font 选项设置字体后，日文即可正确显示。

4. 故障排查与解决方案

当字体未正确显示时

• 原因: 字体数据未加载，或编码格式不正确。
• 解决方案:

1. 验证已以 Base64 格式嵌入字体。
2. 确认字体文件为正确的格式（.ttf）。
3. 检查 MIME 类型是否合适（例如 application/x-font-ttf）。

当布局破坏时

• 原因: 行间距或字体大小设置不正确。
• 解决方案:
• 明确设置 lineHeight 和 fontSize。

当移动设备上文字出现乱码时

• 原因: 设备未安装该字体。
• 解决方案:
• 嵌入字体以消除外部依赖。

总结

在 PDF 生成和编辑中，日文支持是不可避免的挑战，但通过选择合适的库并正确配置字体即可解决。

• jsPDF: 支持 Base64 字体嵌入，适用于简单文档结构。
• pdfmake: 支持复杂布局和样式，但需要仔细的字体配置。

使用这些步骤可解决乱码和字体相关问题，顺利生成兼容日文的 PDF。

5. 高级技术与基于用例的解决方案

介绍

JavaScript PDF 库不仅支持基础的生成与编辑，还能满足更高级和实际的需求。本节介绍数据库集成、动态 PDF 生成等高级技术，并阐述针对特定用例的具体解决方案。

1. 使用动态数据生成 PDF

从 JSON 数据动态创建报告

以下示例基于 JSON 数据生成包含表格的 PDF 报告。

const doc = new jsPDF();
const data = [
  { name: "Taro Yamada", age: 30, job: "Engineer" },
  { name: "Hanako Sato", age: 25, job: "Designer" },
  { name: "Ichiro Tanaka", age: 40, job: "Manager" },
];
doc.text('User Report', 10, 10);
doc.autoTable({
  head: [['Name', 'Age', 'Occupation']],
  body: data.map(item => [item.name, item.age, item.job]),
});
doc.save('report.pdf');

关键要点

• 动态数据： 从 JSON 生成数组数据并自动转换为表格。
• 布局管理： 使用 autoTable 插件轻松创建数据表格。

2. 合并和拆分现有 PDF

合并多个 PDF（pdf-lib）

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(pdfUrls) {
  const mergedPdf = await PDFDocument.create();

  for (let url of pdfUrls) {
    const existingPdf = await fetch(url).then(res => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdf);
    const copiedPages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  download(pdfBytes, "merged.pdf", "application/pdf");
}

关键要点

• 多页处理： 从每个 PDF 复制页面并合并为一个文件。
• 灵活处理： 可以针对每页修改布局或内容。

3. 创建 PDF 表单并填充数据

添加可编辑表单字段（pdf-lib）

import { PDFDocument } from 'pdf-lib';

async function createForm() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([500, 700]);

  const form = pdfDoc.getForm();
  const nameField = form.createTextField('name');
  nameField.setText('Enter your name');
  nameField.addToPage(page, { x: 50, y: 600, width: 300, height: 30 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "form.pdf", "application/pdf");
}

关键要点

• 动态表单： 轻松添加用户可填写的表单。
• 数据集成： 表单数据可读取并在后续处理时复用。

4. 自定义设计和布局调整

创建自定义页眉和页脚（pdfmake）

const docDefinition = {
  header: { text: 'Report Header', alignment: 'center', margin: [0, 10, 0, 0] },
  footer: function(currentPage, pageCount) {
    return { text: `${currentPage} / ${pageCount}`, alignment: 'right', margin: [0, 0, 10, 0] };
  },
  content: [
    { text: 'Report Body', fontSize: 12 },
  ],
};
pdfMake.createPdf(docDefinition).download('custom-layout.pdf');

关键要点

• 页眉和页脚： 插入页面编号、徽标等固定元素。
• 布局灵活性： 细粒度的样式让您能够体现品牌形象。

5. 移动端支持与响应式设计

使用 html2pdf 从 HTML 生成 PDF

const element = document.getElementById('content');
html2pdf(element);

关键要点

• 易于集成： 由于可以复用现有的 HTML 结构，学习成本低。
• 响应式友好： 适用于智能手机和平板电脑。

总结

通过利用先进的技术，使用 JavaScript 处理 PDF 的可能性进一步扩大。

• 数据库集成： 使用 JSON 和外部数据动态生成 PDF。
• 编辑、合并和拆分： 使用 pdf-lib 实现灵活的 PDF 操作。
• 表单创建： 使用可填写的 PDF 高效收集数据。
• 设计优化： 使用 pdfmake 和 html2pdf 轻松实现复杂布局。

使用这些技术构建高度实用的 PDF 生成和编辑功能。

6. 常见问题解答 (FAQ)

介绍

在使用 JavaScript 生成和编辑 PDF 时，会出现各种问题——从初学者到高级用户。本节汇总了常见问题及其解决方案，帮助您在开发过程中排除故障。

1. 基础操作常见问题

Q1. 推荐使用哪种库来生成 JavaScript PDF？

A: 根据你的需求选择合适的库。

• 简单 PDF 生成： jsPDF 是理想选择，能够轻松插入文本和图片。
• 编辑与合并： pdf-lib 支持编辑已有 PDF 并创建表单。
• 复杂布局与表格： pdfmake 适用于高度设计的文档。
• 从 HTML 生成 PDF： html2pdf 适合在保留 CSS 设计的情况下生成 PDF。

Q2. 如何正确显示日文字体？

A: 默认不支持日文字体，请按以下步骤操作。

1. 准备字体文件： 使用兼容日文的字体，如 Noto Sans JP 或 IPA 系列字体。
2. 转换为 Base64： 将字体文件转换为 Base64 格式。
3. 在库中嵌入： 在 jsPDF 中使用 addFileToVFS() 和 addFont()。
4. 设置字体： 在渲染文本前使用 setFont() 选择该字体。

Q3. 为什么在移动设备上文字会出现乱码？

A: 移动设备的字体环境通常与 PC 不同，若未嵌入字体就会出现乱码。

解决方案：

• 生成带有嵌入字体的 PDF，消除外部依赖。
• 提前在移动设备上测试 PDF 的显示效果。

Q4. 如何在 PDF 中添加签名？

A: 使用 pdf-lib 可以通过图片或绘图工具添加签名区域。

const imgData = 'data:image/png;base64,...';
page.drawImage(imgData, {
  x: 50,
  y: 100,
  width: 200,
  height: 100,
});

你也可以在 PDF 中创建手写签名的表单字段。

2. 高级功能常见问题

Q5. 能否在 PDF 中插入动态二维码？

A: 可以实现。下面的示例使用 jsPDF 插入二维码。

const qrCode = new QRCode(document.createElement('div'), {
  text: "https://example.com",
  width: 100,
  height: 100,
});

const qrImg = qrCode._oDrawing._elImage.src;
doc.addImage(qrImg, 'PNG', 10, 10, 50, 50);
doc.save('qrcode-sample.pdf');

Q6. 如何在 PDF 中反映 HTML 表单内容？

A: 通过 html2pdf，可以直接将 HTML 元素转换为 PDF。

const element = document.getElementById('content');
html2pdf(element);

此方式同样保留 CSS 样式，适用于视觉丰富的 PDF。

总结

在使用 JavaScript 处理 PDF 时会遇到各种问题和挑战，但通过选择合适的库和配置，许多问题都能得到解决。希望本 FAQ 能帮助你在实际开发中排查并解决问题。

7. 结论

引言

本文详细探讨了使用 JavaScript 生成和编辑 PDF 的技术与实现方法。从基础操作到高级技巧，涵盖了主流库的比较以及日文支持的关键要点。在本节中，我们回顾全文并总结主要收获。

1. 使用 JavaScript 处理 PDF 的便利性与关键特性

由于 JavaScript 运行在客户端，能够实时生成和编辑 PDF 文件，这在现代开发环境中具有显著优势。其灵活性——支持动态数据处理和设计定制，同时降低服务器负担——备受青睐。

主要优势：

• 减少服务器依赖，提升响应速度。
• 实时预览、表单生成等交互功能。
• 环境依赖低，兼容大多数现代浏览器。

2. 各库特性及如何选择合适的工具

本文介绍了五大主流 JavaScript 库。它们的特性可概括如下。

3. 实现示例回顾

通过实际代码示例，我们演示了如何满足各种需求。

主要功能概述：

1. 基本 PDF 生成： 创建包含文本和图像的 PDF。
2. 使用动态数据： 自动从 JSON 数据生成报告和文档。
3. 编辑现有 PDF： 合并、拆分页面以及添加表单字段。
4. 日语支持： 嵌入字体并防止文字乱码。
5. 自定义设计： 布局控制、页眉和页脚。

这些示例旨在为从初学者到高级用户的开发者提供帮助。

4. 未来展望与新兴技术的期望

预计未来 JavaScript 的 PDF 处理将持续发展。

值得关注的关键趋势：

1. 更强的云集成： 更轻松地与无服务器环境和云存储集成。
2. AI 辅助生成： AI 支持动态设计和自动化报告分析。
3. 新库： 出现专注于性能和可扩展性的新库。

关注这些趋势并采用新技术，您可以进一步提升开发效率。

最终总结

使用 JavaScript 处理 PDF 的技术在 Web 应用和业务系统中扮演着日益重要的角色。通过利用本文介绍的库、实现示例和高级技术，您可以构建灵活且复杂的 PDF 解决方案。

继续探索新技术和方法，打造更强大、更高效的 PDF 工作流。