基于iframe实现PDF偏移量定位文本及高亮的技术咨询

原生iframe调用浏览器PDF viewer的方式，仅支持#page和#search这类简单参数，无法直接处理字节偏移量定位。要实现你的需求，推荐使用PDF.js（Mozilla开源的PDF处理库），它能精细控制PDF解析、页面定位和文本高亮。

核心实现步骤 #

1. 替换iframe为PDF.js容器 #

移除原iframe，创建用于渲染PDF的DOM容器：

<div id="pdf-container" style="width: 100%; height: 100vh;"></div>

2. 引入PDF.js库 #

直接使用CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js"></script>

3. 核心逻辑代码 #

以下代码实现：加载PDF → 通过偏移量定位页面 → 搜索目标文本并高亮

// 配置PDF.js工作路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js';

// 目标参数：替换为你的偏移量和高亮文本
const targetOffset = 12345; // 示例字节偏移量
const highlightText = "Chapter 2 Building a PDF"; // 目标高亮文本
const pdfUrl = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

// 加载PDF文档
pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  // 遍历所有页面，找到包含目标偏移量的页面
  return findPageByOffset(pdf, targetOffset).then(pageNum => {
    // 渲染目标页面
    return renderPage(pdf, pageNum);
  }).then(({ pdf, pageNum, page }) => {
    // 在页面中搜索并高亮目标文本
    return highlightTextInPage(page, highlightText);
  });
});

// 根据字节偏移量查找对应页码
function findPageByOffset(pdf, targetOffset) {
  const numPages = pdf.numPages;
  let pageNum = 1;
  
  // 遍历页面获取字节范围
  const checkPage = (currentPage) => {
    if (currentPage > numPages) return Promise.resolve(pageNum);
    return pdf.getPage(currentPage).then(page => {
      const pageInfo = page.pageInfo;
      // 页面的字节范围（startOffset, endOffset）
      const [startOffset, endOffset] = pageInfo.offset;
      if (targetOffset >= startOffset && targetOffset <= endOffset) {
        pageNum = currentPage;
        return Promise.resolve(pageNum);
      } else {
        return checkPage(currentPage + 1);
      }
    });
  };
  
  return checkPage(1);
}

// 渲染指定页码
function renderPage(pdf, pageNum) {
  const container = document.getElementById('pdf-container');
  const canvas = document.createElement('canvas');
  container.appendChild(canvas);
  
  return pdf.getPage(pageNum).then(page => {
    const viewport = page.getViewport({ scale: 1.5 }); // 调整缩放比例
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    // 渲染页面到canvas
    const renderContext = {
      canvasContext: canvas.getContext('2d'),
      viewport: viewport
    };
    return page.render(renderContext).promise.then(() => {
      return { pdf, pageNum, page };
    });
  });
}

// 高亮页面中的目标文本
function highlightTextInPage(page, highlightText) {
  const container = document.getElementById('pdf-container');
  // 获取页面文本内容及位置信息
  return page.getTextContent().then(textContent => {
    textContent.items.forEach(item => {
      // 匹配目标文本（支持部分匹配，可根据需求调整为精确匹配）
      if (item.str.includes(highlightText)) {
        // 获取文本的位置坐标
        const transform = item.transform;
        const x = transform[4];
        const y = transform[5];
        const width = item.width;
        const height = item.height;
        
        // 创建高亮元素
        const highlight = document.createElement('div');
        highlight.style.position = 'absolute';
        highlight.style.left = `${x}px`;
        highlight.style.top = `${container.clientHeight - y}px`; // 转换坐标系
        highlight.style.width = `${width}px`;
        highlight.style.height = `${height}px`;
        highlight.style.backgroundColor = 'rgba(255, 255, 0, 0.3)'; // 半透明黄色高亮
        highlight.style.pointerEvents = 'none'; // 不干扰交互
        
        container.appendChild(highlight);
      }
    });
  });
}

关键说明 #

• 偏移量定位：通过遍历PDF每个页面的pageInfo.offset属性，判断目标偏移量落在哪个页面的字节范围内，从而确定页码。
• 文本高亮：通过getTextContent()获取页面所有文本的位置信息，匹配目标文本后，在容器中叠加绝对定位的高亮元素。
• 灵活调整：如果不需要精确偏移量，仅需高亮文本，也可以直接用PDF.js的page.search()API简化逻辑。

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