PDFKit 中的 PDF 注释功能详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00851/article/details/148415973

PDFKit 中的 PDF 注释功能详解

什么是 PDF 注释

PDF 注释是 PDF 文档中的交互元素，它们为静态文档增添了丰富的交互可能性。在 PDFKit 这个强大的 PDF 生成库中，开发者可以通过简单的 API 调用为生成的 PDF 文档添加各种注释功能。

注释类型概览

PDFKit 支持多种类型的注释，每种注释都有其特定的用途和表现形式：

基础注释类型
- note(): 添加便签注释
- link(): 创建可点击的超链接
- goTo(): 文档内部跳转链接
文本标记注释
- highlight(): 文本高亮
- underline(): 文本下划线
- strike(): 文本删除线
图形注释
- lineAnnotation(): 线条注释
- rectAnnotation(): 矩形注释
- ellipseAnnotation(): 椭圆注释
特殊注释
- textAnnotation(): 文本注释
- fileAnnotation(): 文件附件注释

注释的核心概念

矩形区域定义

所有注释都需要定义一个矩形区域来指定其位置和大小。这个区域通过四个参数确定：

x: 水平起始位置
y: 垂直起始位置
width: 宽度
height: 高度

颜色设置

大多数注释支持颜色设置，可以通过以下方式指定：

RGB 数组 (如 [255, 0, 0])
十六进制颜色值 (如 "#FF0000")
CSS 命名颜色 (如 "red")

文本相关注释的特殊处理

对于链接、下划线等与文本相关的注释，需要精确计算文本的尺寸。PDFKit 提供了两个实用方法：

widthOfString(text): 计算指定文本在当前字体下的宽度
currentLineHeight(): 获取当前字体下的行高

使用技巧与最佳实践

注释叠加顺序

PDF 注释具有堆叠顺序，后添加的注释会覆盖先前的注释。特别是对于链接注释，应确保它们最后添加，否则可能被其他注释遮挡而无法点击。

简化文本注释

虽然需要手动计算矩形区域，但 PDFKit 为常见的文本注释提供了简化方式。例如，可以在 text() 方法中直接指定链接和下划线属性：

doc.text('点击这里', {
  link: 'http://example.com',
  underline: true
});

实际应用示例

综合注释示例

// 添加带链接的文本
doc.fontSize(25)
   .fillColor('blue')
   .text('这是一个链接', 20, 0);

// 计算文本尺寸
const width = doc.widthOfString('这是一个链接');
const height = doc.currentLineHeight();

// 添加下划线和链接注释
doc.underline(20, 0, width, height, {color: 'blue'})
   .link(20, 0, width, height, 'http://example.com');

// 添加高亮文本
doc.moveDown()
   .fillColor('black')
   .highlight(20, doc.y, doc.widthOfString('高亮文本'), height)
   .text('高亮文本');

// 添加删除线文本
doc.moveDown()
   .strike(20, doc.y, doc.widthOfString('删除文本'), height)
   .text('删除文本');

简化形式示例

doc.fontSize(20)
   .fillColor('red')
   .text('另一个链接', 20, 0, {
     link: 'http://example.org',
     underline: true
   });