pdfAnnotate文本标记注释一次看懂高亮、下划线、删除线、波浪线与便签注释完全实操【免费下载链接】pdfAnnotateJavascript library for creating annotations in PDF documents项目地址: https://gitcode.com/gh_mirrors/pd/pdfAnnotatepdfAnnotatenpm 包名annotpdf是一款用 JavaScript 为 PDF 文档创建注释的开源库支持浏览器和 Node.js 环境。本文带你一次看懂高亮、下划线、删除线、波浪线与便签这 5 种文本标记注释text markup annotation的效果、参数和实操方法帮你快速上手 PDF 批注开发。pdfAnnotate 是什么轻量级 PDF 批注工具箱不是阅读器先厘清定位pdfAnnotate不是PDF 查看器/渲染器它提供一套创建 PDF 注释的 API。典型用法是配合 PDF.js 等渲染库PDF.js 负责画pdfAnnotate 负责改。它的核心优势在于注释直接写入 PDF 文件本身而不是以独立图层或外部存储存在。这样生成的文档发给任何人、用任何 PDF 阅读器打开批注都原样可见方便下载与二次处理详见 README.md。安装非常简单一行命令搞定npm install annotpdf也可以在 TypeScript 项目中直接import { AnnotationFactory } from annotpdf使用项目同时提供打包好的文件_bundles/pdfAnnotate.js供浏览器直接引用。5 种文本标记注释速览高亮、下划线、删除线、波浪线、便签pdfAnnotate 支持的注释类型很多圆形、矩形、多边形、墨迹、自由文本等与划重点场景关系最密切的是下面 5 种前 4 种在 src/annotations/text_markup_annotation.ts 中实现便签注释在 src/annotations/text_annotation.ts 中实现注释类型创建方法视觉效果典型场景高亮 HighlightcreateHighlightAnnotation半透明色块盖在文字上标重点、标关键结论下划线 UnderlinecreateUnderlineAnnotation文字底部一条直线强调专有名词、术语删除线 StrikeOutcreateStrikeOutAnnotation一条横线贯穿文字划掉过时、作废内容波浪线 SquigglycreateSquigglyAnnotation文字底部一条波浪线标记可疑表述、拼写问题便签 TextcreateTextAnnotation页面上一个小图标点击弹出气泡备注评审意见、批注留言高亮注释 Highlight给重点文字加底色高亮注释用半透明颜色盖在选中的文字上是最常用的批注方式常用参数page页码从 0 开始第 1 页传 0rect[x1, y1, x2, y2]注释覆盖的矩形区域contents/author备注内容与作者名必填color{ r, g, b }指定高亮颜色opacity0~1 之间的不透明度quadPoints可选精确贴合多段文字轮廓的四点数组长度必须是 8 的倍数下划线注释 Underline给文字加一条横线下划线注释在选中文本底部画一条横线⚠️避坑提示下划线注释在不同阅读器中的表现不一致——PDF.js 不显示它Chrome PDF 阅读器可正常显示而 Ubuntu 的 Evince 会把它画成上划线。解决办法是调用createDefaultAppearanceStream()生成外观流Appearance Stream让注释自带渲染效果从而在所有阅读器中一致显示。删除线注释 StrikeOut划掉过时内容删除线注释用一条横线贯穿选中的文字表示此处内容作废参数与高亮、下划线完全一致page、rect、contents、author、color、opacity、quadPoints直接替换方法名即可。波浪线注释 Squiggly用波浪线标记可疑文字波浪线注释用一条起伏的曲线替代普通下划线视觉上更醒目常用于标记可疑、需要复核的文字参数同前四种文本标记注释用法保持一致学习成本几乎为零。便签注释 Text点击弹出气泡备注便签Text注释在页面上放置一个小图标点击后弹出气泡显示备注文字是评审文档时写留言的标准姿势便签注释还有几个专属可选项icon图标样式可选Comment、Key、Note、Help、NewParagraph、Paragraph、Insert默认是便签Note图标open设为true时打开文档即默认展开气泡state/stateModel标记批注状态如已接受 / 已拒绝方便协作评审 小提示使用默认外观流渲染图标时目前Help和Note两种图标支持最好其余图标建议使用常规渲染方式。3 步实操加载 PDF → 添加注释 → 下载导出完整流程只有三步下面是高亮注释的最小可运行示例import { AnnotationFactory } from annotpdf AnnotationFactory.loadFile(test.pdf).then((factory) { factory.createHighlightAnnotation({ page: 0, rect: [100, 100, 200, 200], contents: 重点内容, author: John, color: { r: 1, g: 0.9, b: 0 }, opacity: 0.5 }) factory.download(annotated.pdf) })加载静态方法loadFile(path)读取 PDF 并初始化工厂对象若文档加密可追加userPassword/ownerPassword参数。已在使用 PDF.js 的项目也可以把pdfDocument.getData()拿到的数据直接传给new AnnotationFactory(data)构造函数创建调用createHighlightAnnotation等方法即可方法返回注释对象需要删除时用deleteAnnotation(id)移除导出浏览器环境调用download(fileName)触发下载Node.js 环境用save(fileName)存盘write()则返回Uint8Array供进一步处理 关于坐标如果你用鼠标点击来确定注释位置注意两点——PDF 坐标系原点在页面左下角且点击坐标要先减去页面偏移、再通过 PDF.js 的viewport.convertToPdfPoint(x, y)换算到 PDF 坐标系详见 examples/pdfjsExample.html 中的完整示例工程。细节避坑指南坐标、外观流与常用进阶技巧坐标系从左下角起算rect的 y 值越小越靠下新手最常把上下方向搞反页码从 0 开始第 1 页传0第 2 页传1外观流Appearance Stream对下划线、自由文本等注释调用createDefaultAppearanceStream()可让注释自带视觉表现解决部分阅读器如 PDF.js 不显示下划线渲染缺失的问题quadPoints 的长度必须是 8 的倍数每个矩形 8 个坐标值不传时库会自动根据rect推导多数场景无感知颜色支持 0-1 或 0-255 两种取值范围color与fill背景色可分别设置想查看文档现有注释可用getAnnotations()获取每页的注释列表想继续深入这些资料值得收藏完整 API 文档与示例README.md包含 API 表格、坐标换算说明和 PDF 内部结构解析可运行的浏览器示例工程examples/pdfjsExample.html配合 test.pdf 即可体验全部注释按钮文本标记注释源码src/annotations/text_markup_annotation.tsHighlight、Underline、Squiggly、StrikeOut 四个类依次排列适合对照源码学习外观流绘制逻辑便签注释源码src/annotations/text_annotation.ts测试用的真实 PDF 文档test_documents/test.pdf以及各注释类型的单元测试src/__tests__/HighlightAnnotation.test.ts等想阅读源码或参与贡献的同学可以克隆仓库git clone https://gitcode.com/gh_mirrors/pd/pdfAnnotate掌握高亮、下划线、删除线、波浪线和便签这 5 种文本标记注释后你就拥有了 PDF 协作评审中最核心的批注能力剩下的圆形、矩形、多边形、墨迹等图形注释也是同样的三步套路上手即会。【免费下载链接】pdfAnnotateJavascript library for creating annotations in PDF documents项目地址: https://gitcode.com/gh_mirrors/pd/pdfAnnotate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 pdfAnnotate文本标记注释一次看懂高亮、下划线、删除线、波浪线与便签注释完全实操【免费下载链接】pdfAnnotateJavascript library for creating annotations in PDF documents项目地址: https://gitcode.com/gh_mirrors/pd/pdfAnnotatepdfAnnotatenpm 包名annotpdf是一款用 JavaScript 为 PDF 文档创建注释的开源库支持浏览器和 Node.js 环境。本文带你一次看懂高亮、下划线、删除线、波浪线与便签这 5 种文本标记注释text markup annotation的效果、参数和实操方法帮你快速上手 PDF 批注开发。pdfAnnotate 是什么轻量级 PDF 批注工具箱不是阅读器先厘清定位pdfAnnotate不是PDF 查看器/渲染器它提供一套创建 PDF 注释的 API。典型用法是配合 PDF.js 等渲染库PDF.js 负责画pdfAnnotate 负责改。它的核心优势在于注释直接写入 PDF 文件本身而不是以独立图层或外部存储存在。这样生成的文档发给任何人、用任何 PDF 阅读器打开批注都原样可见方便下载与二次处理详见 README.md。安装非常简单一行命令搞定npm install annotpdf也可以在 TypeScript 项目中直接import { AnnotationFactory } from annotpdf使用项目同时提供打包好的文件_bundles/pdfAnnotate.js供浏览器直接引用。5 种文本标记注释速览高亮、下划线、删除线、波浪线、便签pdfAnnotate 支持的注释类型很多圆形、矩形、多边形、墨迹、自由文本等与划重点场景关系最密切的是下面 5 种前 4 种在 src/annotations/text_markup_annotation.ts 中实现便签注释在 src/annotations/text_annotation.ts 中实现注释类型创建方法视觉效果典型场景高亮 HighlightcreateHighlightAnnotation半透明色块盖在文字上标重点、标关键结论下划线 UnderlinecreateUnderlineAnnotation文字底部一条直线强调专有名词、术语删除线 StrikeOutcreateStrikeOutAnnotation一条横线贯穿文字划掉过时、作废内容波浪线 SquigglycreateSquigglyAnnotation文字底部一条波浪线标记可疑表述、拼写问题便签 TextcreateTextAnnotation页面上一个小图标点击弹出气泡备注评审意见、批注留言高亮注释 Highlight给重点文字加底色高亮注释用半透明颜色盖在选中的文字上是最常用的批注方式常用参数page页码从 0 开始第 1 页传 0rect[x1, y1, x2, y2]注释覆盖的矩形区域contents/author备注内容与作者名必填color{ r, g, b }指定高亮颜色opacity0~1 之间的不透明度quadPoints可选精确贴合多段文字轮廓的四点数组长度必须是 8 的倍数下划线注释 Underline给文字加一条横线下划线注释在选中文本底部画一条横线⚠️避坑提示下划线注释在不同阅读器中的表现不一致——PDF.js 不显示它Chrome PDF 阅读器可正常显示而 Ubuntu 的 Evince 会把它画成上划线。解决办法是调用createDefaultAppearanceStream()生成外观流Appearance Stream让注释自带渲染效果从而在所有阅读器中一致显示。删除线注释 StrikeOut划掉过时内容删除线注释用一条横线贯穿选中的文字表示此处内容作废参数与高亮、下划线完全一致page、rect、contents、author、color、opacity、quadPoints直接替换方法名即可。波浪线注释 Squiggly用波浪线标记可疑文字波浪线注释用一条起伏的曲线替代普通下划线视觉上更醒目常用于标记可疑、需要复核的文字参数同前四种文本标记注释用法保持一致学习成本几乎为零。便签注释 Text点击弹出气泡备注便签Text注释在页面上放置一个小图标点击后弹出气泡显示备注文字是评审文档时写留言的标准姿势便签注释还有几个专属可选项icon图标样式可选Comment、Key、Note、Help、NewParagraph、Paragraph、Insert默认是便签Note图标open设为true时打开文档即默认展开气泡state/stateModel标记批注状态如已接受 / 已拒绝方便协作评审 小提示使用默认外观流渲染图标时目前Help和Note两种图标支持最好其余图标建议使用常规渲染方式。3 步实操加载 PDF → 添加注释 → 下载导出完整流程只有三步下面是高亮注释的最小可运行示例import { AnnotationFactory } from annotpdf AnnotationFactory.loadFile(test.pdf).then((factory) { factory.createHighlightAnnotation({ page: 0, rect: [100, 100, 200, 200], contents: 重点内容, author: John, color: { r: 1, g: 0.9, b: 0 }, opacity: 0.5 }) factory.download(annotated.pdf) })加载静态方法loadFile(path)读取 PDF 并初始化工厂对象若文档加密可追加userPassword/ownerPassword参数。已在使用 PDF.js 的项目也可以把pdfDocument.getData()拿到的数据直接传给new AnnotationFactory(data)构造函数创建调用createHighlightAnnotation等方法即可方法返回注释对象需要删除时用deleteAnnotation(id)移除导出浏览器环境调用download(fileName)触发下载Node.js 环境用save(fileName)存盘write()则返回Uint8Array供进一步处理 关于坐标如果你用鼠标点击来确定注释位置注意两点——PDF 坐标系原点在页面左下角且点击坐标要先减去页面偏移、再通过 PDF.js 的viewport.convertToPdfPoint(x, y)换算到 PDF 坐标系详见 examples/pdfjsExample.html 中的完整示例工程。细节避坑指南坐标、外观流与常用进阶技巧坐标系从左下角起算rect的 y 值越小越靠下新手最常把上下方向搞反页码从 0 开始第 1 页传0第 2 页传1外观流Appearance Stream对下划线、自由文本等注释调用createDefaultAppearanceStream()可让注释自带视觉表现解决部分阅读器如 PDF.js 不显示下划线渲染缺失的问题quadPoints 的长度必须是 8 的倍数每个矩形 8 个坐标值不传时库会自动根据rect推导多数场景无感知颜色支持 0-1 或 0-255 两种取值范围color与fill背景色可分别设置想查看文档现有注释可用getAnnotations()获取每页的注释列表想继续深入这些资料值得收藏完整 API 文档与示例README.md包含 API 表格、坐标换算说明和 PDF 内部结构解析可运行的浏览器示例工程examples/pdfjsExample.html配合 test.pdf 即可体验全部注释按钮文本标记注释源码src/annotations/text_markup_annotation.tsHighlight、Underline、Squiggly、StrikeOut 四个类依次排列适合对照源码学习外观流绘制逻辑便签注释源码src/annotations/text_annotation.ts测试用的真实 PDF 文档test_documents/test.pdf以及各注释类型的单元测试src/__tests__/HighlightAnnotation.test.ts等想阅读源码或参与贡献的同学可以克隆仓库git clone https://gitcode.com/gh_mirrors/pd/pdfAnnotate掌握高亮、下划线、删除线、波浪线和便签这 5 种文本标记注释后你就拥有了 PDF 协作评审中最核心的批注能力剩下的圆形、矩形、多边形、墨迹等图形注释也是同样的三步套路上手即会。【免费下载链接】pdfAnnotateJavascript library for creating annotations in PDF documents项目地址: https://gitcode.com/gh_mirrors/pd/pdfAnnotate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
![洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表](http://pic.xiahunao.cn/yaotu/洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表)
