问题：如何实现PDFJS中选中文本并添加高亮标注功能？

Question

在使用 PDF.js 实现文本选中并添加高亮标注功能时，常见的技术问题是如何准确获取用户选中的文本位置，并在 PDF 文档的对应区域绘制高亮标注。由于 PDF.js 主要负责渲染 PDF 内容，但并未直接提供选区标注的 API，开发者需自行处理文本层与标注层的坐标映射、多页支持、选区持久化及标注数据存储等问题。此外，还需考虑不同缩放比例下的定位精度和跨浏览器兼容性。解决这一问题通常涉及深入理解 PDF.js 的文本布局机制与页面渲染流程。

Answer 1

一、PDF.js 中实现文本选中与高亮标注的技术挑战

在使用 PDF.js 实现文本选中并添加高亮标注功能时，常见的技术问题是如何准确获取用户选中的文本位置，并在 PDF 文档的对应区域绘制高亮标注。由于 PDF.js 主要负责渲染 PDF 内容，但并未直接提供选区标注的 API，开发者需自行处理文本层与标注层的坐标映射、多页支持、选区持久化及标注数据存储等问题。

此外，还需考虑不同缩放比例下的定位精度和跨浏览器兼容性。解决这一问题通常涉及深入理解 PDF.js 的文本布局机制与页面渲染流程。

1.1 文本选中事件监听

PDF.js 在渲染文本内容时，会将每一页的内容分为两个部分：一个是 canvas 渲染的图像层，另一个是用于文本选择的 text-layer 层。text-layer 是一个 HTML 元素（通常是 div），它与 canvas 上的文本内容一一对应，用于实现复制、搜索等功能。

为了实现文本选中，我们需要监听 text-layer 上的 mouseup 或 selectionchange 事件，获取当前选中的文本内容及其位置信息。

document.addEventListener('mouseup', function() {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      // 获取选中文本所在的 DOM 节点
      const selectedText = range.toString();
      console.log('Selected Text:', selectedText);
    }
  });

1.2 获取选中文本的坐标信息

由于 PDF.js 的 text-layer 中每个文本块都由多个 元素组成，因此需要遍历这些元素来确定选中范围的起始和结束位置。

可以利用 Range 和 Selection API 来获取选中范围的边界矩形，然后通过 getBoundingClientRect() 方法获得相对于视口的位置信息。

const rect = range.getBoundingClientRect();
console.log('Bounding Rect:', rect);

注意：由于 PDF 页面可能被缩放或滚动，必须将该坐标转换为 PDF 页面的绝对坐标系统，以便后续绘制标注。

1.3 坐标映射与标注绘制

PDF.js 提供了 getDestination 等方法用于解析链接跳转目标，但对于文本选区的坐标映射，需要手动计算。

一种常见做法是根据当前页面的 viewport 缩放比例，将视口坐标转换为 PDF 页面的逻辑坐标：

const viewport = pdfPage.getViewport({ scale: currentScale });
const pageRect = pdfPage.getBoundingBox(); // [xMin, yMin, xMax, yMax]
const logicalX = (rect.left - containerOffsetLeft) / viewport.scale;
const logicalY = (rect.top - containerOffsetTop) / viewport.scale;

随后可以在 canvas 上绘制矩形标注，或者使用 SVG 图层进行覆盖。

二、多页支持与标注数据持久化

在实际应用中，PDF 文档往往包含多页内容，因此需要考虑如何在不同页面之间切换时保持选中状态和标注数据。

2.1 多页标注的结构设计

建议采用以下数据结构保存标注信息：

字段名	类型	说明
page_num	integer	所在页面编号
text	string	选中文本内容
bounding_box	array[4]	[x1, y1, x2, y2]，逻辑坐标系下的矩形框
color	string	标注颜色

2.2 持久化与加载

标注数据可以通过 localStorage、IndexedDB 或后端服务进行持久化存储。

// 存储
localStorage.setItem('annotations', JSON.stringify(annotationsArray));

// 加载
const savedAnnotations = JSON.parse(localStorage.getItem('annotations'));

当页面重新加载时，可以根据存储的 bounding_box 信息，在对应的 PDF 页面上重新绘制标注图形。

三、缩放与跨浏览器兼容性

在不同缩放比例下，文本选区的位置可能会出现偏差，尤其是在不同浏览器中，DOM 的 offset、scroll、client 属性可能存在差异。

3.1 缩放适配策略

推荐在每次缩放变化后重新计算标注图形的绘制位置。例如：

function onZoomChange(newScale) {
  annotations.forEach(annotation => {
    redrawAnnotation(annotation, newScale);
  });
}

同时，应缓存原始逻辑坐标，避免多次缩放导致误差累积。

3.2 浏览器兼容性处理

不同浏览器对 Range.getBoundingClientRect() 的实现略有差异，尤其是 Firefox 和 Safari 对于某些嵌套结构的处理。

建议统一使用 range.getClientRects() 获取多个矩形框，并取其包围盒作为最终选区区域。

const rects = Array.from(range.getClientRects());
const combinedRect = rects.reduce((acc, r) => {
  return {
    top: Math.min(acc.top, r.top),
    left: Math.min(acc.left, r.left),
    bottom: Math.max(acc.bottom, r.bottom),
    right: Math.max(acc.right, r.right)
  };
}, { top: Infinity, left: Infinity, bottom: -Infinity, right: -Infinity });

四、完整流程图

以下是实现文本选中与高亮标注的整体流程：

graph TD
    A[用户选中文本] --> B[监听 mouseup/selectionchange]
    B --> C[获取选中范围 Range]
    C --> D[获取选中区域的 DOM Rect]
    D --> E[转换为 PDF 页面逻辑坐标]
    E --> F[绘制高亮标注]
    F --> G{是否跨页?}
    G -->|是| H[记录每页标注信息]
    G -->|否| I[仅记录当前页标注]
    H --> J[持久化标注数据]
    I --> J
    J --> K[页面重载时恢复标注]