如何在浏览器端实现PDF标注并将标注数据存入数据库？

优先方案：基于现有PDF渲染能力拓展（无需修改已有PDF展示逻辑） #

如果你当前的PDF展示是基于PDF.js实现（绝大多数开源网页PDF渲染方案都基于该库），改造成本最低：

• 在每个PDF页的渲染canvas上层，叠加一个尺寸、位置完全对齐的透明canvas作为标注绘制层，所有用户绘制操作都在该透明层完成，不影响原PDF渲染
• 自行实现绘制逻辑或者引入轻量绘制库：
  • 基础图形（圆形、矩形、自由线条）可以直接监听透明层的mousedown/mousemove/mouseup事件实现绘制，每个标注生成时记录核心属性：标注类型、所属页码、相对于PDF页原始尺寸的坐标/尺寸参数、样式属性（颜色、透明度、线条粗细）
  • 如果需要文本高亮、注释等更复杂的标注，可以直接调用PDF.js自带的文本选取API，拿到选中文本的坐标范围直接存储即可
• 持久化逻辑：前端将标注的结构化数据序列化为JSON提交到后端，存储时关联对应PDF的唯一标识、用户ID；页面重载时根据PDF ID和用户ID拉取标注列表，遍历在对应页码的标注层重绘即可

备选方案：PDF转结构化格式实现（无需手写绘制逻辑） #

如果接受提前转换PDF格式，可大幅降低前端开发量：

• 后端预处理：用pdf2htmlEX（Node/Shell工具）或者Python的PyMuPDF库，将PDF每页转换为坐标和原PDF完全对齐的SVG/固定布局HTML
• 前端直接引入Fabric.js这类封装好的 Canvas 编辑库，自带圆形、自由绘制、矩形等常用图形的创建、编辑、删除能力，无需自行实现鼠标事件监听逻辑；库本身自带导出所有图形结构化数据的API，直接将导出的JSON提交后端存储即可
• 标注还原时直接将后端存储的标注JSON传入Fabric.js的加载接口，可自动完成所有标注的渲染

通用存储设计 #

两种方案的后端存储逻辑通用，核心表字段建议：

• 基础关联字段：id、pdf_id（PDF文件唯一标识）、user_id（标注所属用户ID）、page_num（标注所在页码）
• 业务字段：annotation_data（JSON类型，存储标注的所有属性）、created_at、updated_at
• 接口只需要实现标注的增删改查基础能力即可，用户每次修改标注时实时同步到后端

注意事项 #

• 坐标必须做相对换算：不要直接存储屏幕像素坐标，要换算为基于PDF页原始宽高的比例值，或者PDF原始尺寸的绝对坐标，避免页面缩放、不同设备屏幕尺寸差异导致的标注错位
• 多页PDF做懒加载：如果PDF页数较多，不要一次性加载全量标注，只加载当前可视区域页码对应的标注，避免性能损耗

内容的提问来源于stack exchange，提问作者Bob