PDF 注释提供了一种便捷的方式，可以在不修改文档原始内容的情况下，为 PDF 添加评论、高亮、备注、链接、图章以及其他交互式元素。它们广泛应用于文档审阅、校对、协作和审批流程中。
借助 Spire.PDF for JavaScript，开发人员可以直接在 React 应用程序中通过编程方式向 PDF 文档添加多种类型的注释。本文将演示两种常用的注释类型：用于高亮指定文本的 文本标记注释，以及用于在页面上附加评论的 弹出式注释。
本文内容：
- 在 React 项目中安装 Spire.PDF for JavaScript
- 使用 JavaScript 为 PDF 添加文本标记注释
- 使用 JavaScript 为 PDF 添加弹出式注释
- 文本标记注释与弹出式注释的区别
- 使用其他类型的 PDF 注释
- 总结
- 常见问题
在 React 项目中安装 Spire.PDF for JavaScript
在处理 PDF 注释之前，需要先将 Spire.PDF for JavaScript 集成到 React 应用程序中。
可以通过 npm 安装所需的软件包：
npm i spire.office
然后，将所需的 JavaScript、WebAssembly 和框架文件复制到 React 项目的 public 文件夹中，以便应用程序在运行时加载这些文件。
有关详细的安装和配置说明，请参考：
如何在 React 项目中集成 Spire.PDF for JavaScript
以下示例假定 Spire.PDF 已完成配置，并且输入 PDF 文件已放置在 public 文件夹中。
使用 JavaScript 为 PDF 添加文本标记注释
文本标记注释通常用于文档审阅。开发人员可以利用它们对 PDF 中的指定文本进行高亮、下划线、删除线或其他形式的标记。
在本示例中，我们首先使用 PdfTextFinder 在 PDF 中查找指定句子。找到文本后，获取其边界矩形，并针对相应区域分别创建高亮注释。
以下 React 代码演示如何高亮 PDF 文档中的指定文本：
import React, { useEffect, useState } from 'react';
function App() {
const [ready, setReady] = useState(false);
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 addMarkupAnnotation = async () => {
const wasmModule = window.wasmModule.spirepdf;
const inputFileName = 'input.pdf';
const outputFileName = 'MarkupAnnotation.pdf';
await window.spire.FetchFileToVFS(inputFileName, '/', `${process.env.PUBLIC_URL || ''}/`);
const doc = new wasmModule.PdfDocument();
doc.LoadFromFile(inputFileName);
const page = doc.Pages.get_Item(0);
const finder = new wasmModule.PdfTextFinder(page);
const TARGET_TEXT = '月亮，作为夜空中最明亮的天体之一，自古以来就吸引着人类的注意。它不仅影响着地球的潮'+
'汐变化，还在人类文化、神话和科学探索中占据重要地位。';
const textFragment = finder.Find(TARGET_TEXT).get(0);
const bounds = textFragment.Bounds.toArray();
bounds.forEach((rect) => {
const annotation = new wasmModule.PdfTextMarkupAnnotation(
'Administrator',
'这是一个高亮标注。',
rect
);
annotation.TextMarkupAnnotationType =
wasmModule.PdfTextMarkupAnnotationType.Highlight;
annotation.TextMarkupColor =
new wasmModule.PdfRGBColor({
color: wasmModule.Color.get_LightYellow()
});
page.AnnotationsWidget.Add(annotation);
});
doc.SaveToFile(outputFileName);
doc.Close();
finder.Dispose();
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const url = URL.createObjectURL(
new Blob([fileArray], { type: 'application/pdf' })
);
const link = document.createElement('a');
link.href = url;
link.download = outputFileName;
link.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', padding: 30 }}>
<h1>Add Markup Annotation to PDF</h1>
<button onClick={addMarkupAnnotation} disabled={!ready}>
Add Markup Annotation
</button>
</div>
);
}
export default App;
效果图：
代码说明
添加注释的过程可以分为几个主要步骤。
首先，FetchFileToVFS() 会将 input.pdf 加载到 WebAssembly 虚拟文件系统中。随后创建 PdfDocument 对象，用于加载和操作 PDF 文档。
await window.spire.FetchFileToVFS(
inputFileName,
'/',
`${process.env.PUBLIC_URL || ''}/`
);
const doc = new wasmModule.PdfDocument();
doc.LoadFromFile(inputFileName);
接下来，获取 PDF 的第一页，并将其传递给 PdfTextFinder。
const page = doc.Pages.get_Item(0);
const finder = new wasmModule.PdfTextFinder(page);
随后查找目标文本，并获取其对应的边界矩形：
const textFragment = finder.Find(TARGET_TEXT).get(0);
const bounds = textFragment.Bounds.toArray();
一个句子可能跨越多行，因此其位置可能由多个矩形组成。代码会遍历所有返回的边界矩形，并分别为每个区域创建一个 PdfTextMarkupAnnotation。
bounds.forEach((rect) => {
const annotation = new wasmModule.PdfTextMarkupAnnotation(
'Administrator',
'This is a markup annotation.',
rect
);
annotation.TextMarkupAnnotationType =
wasmModule.PdfTextMarkupAnnotationType.Highlight;
page.AnnotationsWidget.Add(annotation);
});
在本示例中，注释类型被设置为 Highlight，颜色则设置为浅黄色。
最后，将修改后的 PDF 保存到虚拟文件系统中，并转换为 Blob，从而允许浏览器下载生成的文件。
使用 JavaScript 为 PDF 添加弹出式注释
当需要在 PDF 页面的指定位置添加评论或备注时，可以使用弹出式注释。与直接标记现有文本不同，弹出式注释会在页面上创建一个注释图标，读者可以在兼容的 PDF 阅读器中与其交互。
以下示例在 PDF 的第一页添加一条评论注释：
import React, { useEffect, useState } from 'react';
function App() {
const [ready, setReady] = useState(false);
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 addPopupAnnotation = async () => {
const wasmModule = window.wasmModule.spirepdf;
const inputFileName = 'input.pdf';
const outputFileName = 'PopupAnnotation.pdf';
await window.spire.FetchFileToVFS(inputFileName, '/', `${process.env.PUBLIC_URL || ''}/`);
const doc = new wasmModule.PdfDocument();
doc.LoadFromFile(inputFileName);
const page = doc.Pages.get_Item(0);
const rect = new wasmModule.RectangleF({ x: 155, y: 85, width: 0, height: 0 });
const annotation = new wasmModule.PdfPopupAnnotation({
rectangle: rect,
text: '这是一个弹出式注释。',
});
annotation.Icon = wasmModule.PdfPopupIcon.Comment;
annotation.Color = new wasmModule.PdfRGBColor({ color: wasmModule.Color.get_Red() });
page.Annotations.Add(annotation);
doc.SaveToFile(outputFileName);
doc.Close();
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const url = URL.createObjectURL(new Blob([fileArray], { type: 'application/pdf' }));
const link = document.createElement('a');
link.href = url;
link.download = outputFileName;
link.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', padding: 30 }}>
<h1>Add Popup Annotation to PDF</h1>
<button onClick={addPopupAnnotation} disabled={!ready}>
Add Popup Annotation
</button>
</div>
);
}
export default App;
效果图：
代码说明
加载 PDF 后，首先获取第一页：
const page = doc.Pages.get_Item(0);
随后创建一个 RectangleF 对象，用于定义弹出式注释在页面上的位置。
const rect = new wasmModule.RectangleF({
x: 155,
y: 85,
width: 0,
height: 0
});
接下来创建 PdfPopupAnnotation 对象。其中，rectangle 属性决定注释显示的位置，而 text 则定义注释中显示的评论内容。
const annotation = new wasmModule.PdfPopupAnnotation({
rectangle: rect,
text: 'This is a popup annotation.'
});
还可以自定义注释图标的样式和颜色：
annotation.Icon = wasmModule.PdfPopupIcon.Comment;
annotation.Color =
new wasmModule.PdfRGBColor({
color: wasmModule.Color.get_Red()
});
最后，通过以下代码将注释添加到页面中：
page.Annotations.Add(annotation);
随后保存修改后的 PDF，并在浏览器中下载。
文本标记注释与弹出式注释的区别
虽然这两种注释都用于向 PDF 文档添加审阅信息，但它们适用于不同的使用场景。
| 注释类型 | 常见用途 | 定位方式 |
|---|---|---|
| 文本标记注释 | 高亮或标记 PDF 中已有的文本 | 根据选中文本的边界确定位置 |
| 弹出式注释 | 在指定位置添加评论或备注 | 根据页面坐标确定位置 |
文本标记注释尤其适合审阅已有内容，因为注释可以精确跟随目标文本的位置。相比之下，当评论只需要关联到页面中的某个区域，而不是特定文本片段时，弹出式注释会更加灵活。
使用其他类型的 PDF 注释
以上示例仅介绍了两种注释类型，但在使用 Spire.PDF for JavaScript 创建其他类型的注释时，整体处理流程基本类似。
典型的注释处理流程如下：
- 加载 PDF 文档。
- 获取需要添加注释的页面。
- 确定注释的位置或目标内容。
- 创建相应的注释对象。
- 配置文本、颜色、图标、边框或目标位置等属性。
- 将注释添加到 PDF 页面。
- 保存修改后的文档。
例如，自由文本注释可以直接在页面上显示文字，图章注释可以表示“已批准”等审阅状态，而链接注释则可以将 PDF 内容连接到网页、外部文件或同一文档中的其他位置。
不同注释类型所使用的注释类和可配置属性会有所不同，但基本实现方式大体一致。
总结
注释可以增强 PDF 文档的交互性，在文档审阅、评论、协作和审批等场景中尤其有用。
借助 Spire.PDF for JavaScript，React 应用程序可以直接在浏览器中通过编程方式创建 PDF 注释。本文演示了如何查找指定文本并添加 文本标记注释，以及如何在 PDF 页面的指定坐标处添加 弹出式注释。
通过相同的基本思路，开发人员还可以根据实际应用需求进一步实现自由文本、图章、形状、链接以及其他类型的注释。
常见问题
1. Spire.PDF for JavaScript 支持添加哪些类型的 PDF 注释？
Spire.PDF for JavaScript 支持多种注释类型，包括文本标记注释、自由文本注释、弹出式注释、图章注释、形状注释、网页链接注释、文件链接注释以及文档链接注释等。
具体使用的类和属性取决于注释类型。
2. 是否可以自动高亮文本，而不需要手动指定坐标？
可以。你可以使用 PdfTextFinder 在 PDF 中搜索指定文本，并获取对应的边界矩形。然后，可以使用这些矩形自动确定文本标记注释的位置。
这种方式非常适合自动高亮关键词、审阅术语或指定句子等场景。
3. 为什么文本标记注释示例会为一个句子创建多个注释？
一个句子可能跨越 PDF 中的多行。在这种情况下，文本查找器可能会返回多个边界矩形，分别表示同一段文本的不同部分。
为每个矩形分别创建注释，可以确保跨行的目标文本都能够被完整、准确地高亮。
4. 是否可以自定义 PDF 注释的外观？
可以。根据注释类型的不同，可以自定义颜色、图标、注释文本、位置、文本标记类型以及其他外观属性。
例如，本教程中的文本标记注释使用浅黄色高亮，而弹出式注释则使用红色评论图标。
5. 下载 PDF 后，添加的注释是否仍然会保留？
会。当调用 SaveToFile() 时，这些注释会被写入输出 PDF 文件中。文件下载后，可以在支持标准 PDF 注释的 PDF 阅读器中查看这些注释。
获取免费许可证
如果您需要去除生成文档中的评估提示或解除功能限制，请联系我们获取有效期 30 天的临时许可证。
