咨询：基于JavaScript实现PDF注释元数据展示及滚动同步的方案

推荐的JavaScript库 #

• PDF.js：Mozilla开源的Web端PDF渲染核心库，能直接解析PDF的注释、文本结构与页面布局，支持自定义交互事件绑定，是这类PDF交互场景的首选方案，完全基于浏览器环境运行，无需后端依赖。
• pdfjs-dist：PDF.js的npm发布版本，适合Vue、React等现代前端工程化项目集成，可通过模块导入方式使用核心API，便于项目打包与维护。
• PDFLib：如果后续需要对PDF注释进行写入或修改操作可补充使用，但核心的渲染与交互逻辑仍以PDF.js为主。

具体实现步骤 #

1. 解析PDF注释并建立脚注映射 #

首先加载PDF文档，遍历所有页面提取注释信息，筛选出带有脚注ID的注释，存储ID与对应页面位置、文本范围的映射关系：

const pdfDoc = await pdfjsLib.getDocument('target-book.pdf').promise;
const footnoteMap = new Map();

for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
  const page = await pdfDoc.getPage(pageNum);
  const annotations = await page.getAnnotations();
  
  annotations.forEach(anno => {
    // 根据实际注释类型/属性筛选脚注（示例假设注释带有footnoteId字段）
    if (anno.subtype === 'Text' && anno.footnoteId) {
      footnoteMap.set(anno.footnoteId, {
        pageNum,
        rect: anno.rect, // 注释在页面的坐标范围
        content: anno.contents
      });
    }
  });
}

2. 绑定交互事件获取脚注ID #

监听PDF文本层的选中或点击事件，匹配映射关系拿到脚注ID后发起AJAX请求获取元数据，渲染到侧边栏：

// 监听文本选中事件
const pdfViewer = document.getElementById('pdfViewer').querySelector('.pdfViewer');
pdfViewer.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (!selection.toString()) return;
  
  // 获取选中区域对应的页面与坐标，匹配footnoteMap中的脚注
  // 简化示例：实际可通过PDF.js的文本层坐标映射实现精准匹配
  const currentPage = pdfViewer.currentPageNumber;
  const matchedFootnote = Array.from(footnoteMap.values()).find(item => item.pageNum === currentPage);
  
  if (matchedFootnote) {
    fetchMetadata(matchedFootnote.footnoteId);
  }
});

// AJAX请求元数据函数
function fetchMetadata(footnoteId) {
  fetch(`/api/metadata/${footnoteId}`)
    .then(res => res.json())
    .then(data => {
      const sidebar = document.getElementById('metadata-sidebar');
      sidebar.innerHTML = `
        <h3>脚注元数据</h3>
        <div class="meta-item">
          <span>ID:</span>
          <span>${data.id}</span>
        </div>
        <div class="meta-item">
          <span>关联资源:</span>
          <span>${data.relatedResources}</span>
        </div>
        <!-- 其他元数据字段 -->
      `;
    });
}

3. 实现滚动同步逻辑 #

通过监听PDF页面切换与滚动事件，同步更新侧边栏的元数据：

// 监听PDF页面切换事件
pdfViewer.addEventListener('pagechange', (e) => {
  const currentPageNum = e.pageNumber;
  const currentFootnotes = Array.from(footnoteMap.values()).filter(item => item.pageNum === currentPageNum);
  
  // 默认加载当前页第一个脚注的元数据
  if (currentFootnotes.length > 0) {
    fetchMetadata(currentFootnotes[0].footnoteId);
  }
});

// 监听页面内滚动，实现精准同步
const scrollContainer = document.getElementById('pdf-container');
scrollContainer.addEventListener('scroll', () => {
  const currentPageNum = pdfViewer.currentPageNumber;
  const currentFootnotes = Array.from(footnoteMap.values()).filter(item => item.pageNum === currentPageNum);
  
  currentFootnotes.forEach(footnote => {
    // 获取脚注对应的DOM元素（需在渲染时给注释节点添加data-footnote-id属性）
    const footnoteEl = document.querySelector(`[data-footnote-id="${footnote.footnoteId}"]`);
    if (!footnoteEl) return;
    
    const rect = footnoteEl.getBoundingClientRect();
    // 判断脚注是否进入视口
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      fetchMetadata(footnote.footnoteId);
      return;
    }
  });
});

4. 交互体验优化 #

• 给当前激活的脚注文本添加高亮样式，可通过操作PDF.js生成的文本层节点实现；
• 在侧边栏添加当前页面脚注列表，支持手动切换查看不同脚注的元数据；
• 为AJAX请求添加加载状态提示，避免用户等待时无反馈。

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