如何借助pdf.js通过坐标定位PDF指定文本并高亮对应区域？

完全可以用pdf.js实现这个需求，核心是利用pdf.js的页面视图转换、滚动控制和DOM/Canvas绘制能力，步骤如下：

1. 加载PDF并获取目标页面 #

首先通过pdfjsLib.getDocument加载PDF文档，再通过getPage获取坐标对应的目标页面（需提前明确坐标所属的页码）。

2. 坐标转换与页面导航 #

PDF的坐标系统原点在页面左下角，而DOM的坐标原点在左上角，需要通过pdf.js的viewport对象将PDF内部坐标转换为屏幕坐标，然后控制容器滚动到目标区域，让该位置显示在视口内（比如居中展示）。

3. 绘制高亮区域 #

可以通过两种方式实现高亮：

• 叠加DOM元素：在PDF容器上方添加绝对定位的半透明div，对应转换后的坐标区域；
• Canvas绘制：在渲染PDF的canvas上直接绘制高亮矩形。

代码示例 #

// 假设已知参数：页码pageNum，PDF坐标x/y，区域宽w/高h
async function navigateAndHighlight(pageNum, x, y, w, h) {
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument('your-pdf-file-path').promise;
  const targetPage = await pdfDoc.getPage(pageNum);
  
  // 获取页面视图，适配容器宽度
  const pdfContainer = document.getElementById('pdf-container');
  const originalViewport = targetPage.getViewport({ scale: 1 });
  const scale = pdfContainer.clientWidth / originalViewport.width;
  const viewport = targetPage.getViewport({ scale });
  
  // 转换PDF坐标（左下角原点）为屏幕坐标（左上角原点）
  const screenX = x * scale;
  const screenY = (originalViewport.height - y - h) * scale;
  const screenWidth = w * scale;
  const screenHeight = h * scale;
  
  // 导航到目标位置：让区域居中显示
  pdfContainer.scrollTop = screenY - pdfContainer.clientHeight / 2;
  
  // 方式1：添加DOM高亮层
  const highlightDiv = document.createElement('div');
  highlightDiv.style.position = 'absolute';
  highlightDiv.style.left = `${screenX}px`;
  highlightDiv.style.top = `${screenY}px`;
  highlightDiv.style.width = `${screenWidth}px`;
  highlightDiv.style.height = `${screenHeight}px`;
  highlightDiv.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
  highlightDiv.style.pointerEvents = 'none'; // 不干扰PDF交互
  pdfContainer.appendChild(highlightDiv);
  
  // 方式2：在Canvas上绘制高亮（如果用Canvas渲染PDF）
  /*
  const canvas = document.createElement('canvas');
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  pdfContainer.appendChild(canvas);
  
  const ctx = canvas.getContext('2d');
  await targetPage.render({ canvasContext: ctx, viewport }).promise;
  
  // 绘制高亮矩形
  ctx.fillStyle = 'rgba(255, 255, 0, 0.3)';
  ctx.fillRect(screenX, screenY, screenWidth, screenHeight);
  */
}

注意事项 #

• 如果只有单点坐标(x,y)没有宽高，可以通过targetPage.getTextContent()获取页面所有文本块的位置信息，匹配坐标对应的文本块来提取宽高；
• 滚动逻辑可根据需求调整，比如直接滚动到区域顶部而非居中；
• 若PDF有缩放变化，需要重新计算坐标和高亮区域的尺寸。

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