使用PDF.js能否提取PDF内链接URL、对应坐标及页面相关参数？

前置准备 #

确保你已经在项目中引入了对应版本的PDF.js资源，配置好worker路径：

// 配置worker路径，路径按你实际存放位置调整
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

完整实现代码 #

async function extractPdfLinkInfo(pdfUrl) {
  const result = [];
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  const totalPages = pdfDoc.numPages;

  // 遍历每一页处理
  for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    // 获取原尺寸视口，scale设为1取原始大小
    const viewport = page.getViewport({ scale: 1 });
    // 页面尺寸：viewport.width / viewport.height 就是页面原始宽高
    const pageSize = {
      width: viewport.width,
      height: viewport.height
    };
    // 页面标识：直接用页码即可，也可以自定义命名规则
    const pageId = `page_${pageNum}`;

    // 获取当前页所有注解，筛选链接类型
    const annotations = await page.getAnnotations();
    const linkList = annotations
      .filter(anno => anno.subtype === 'Link' && anno.url)
      .map(link => {
        const rect = link.rect;
        // PDF坐标原点在左下角，转成左上角坐标系的XY坐标
        const topLeftX = rect[0];
        const topLeftY = pageSize.height - rect[3];
        return {
          url: link.url,
          topLeftX,
          topLeftY,
          // 附加宽高方便你做悬浮热区
          width: rect[2] - rect[0],
          height: rect[3] - rect[1]
        };
      });

    result.push({
      pageId,
      pageSize,
      linkList
    });
  }
  return result;
}

// 调用示例
extractPdfLinkInfo('你的测试PDF路径.pdf').then(res => {
  console.log('提取结果', res);
  // 这里可以拿到所有页的参数，如果你导出JPG的时候有缩放比例，所有坐标和尺寸直接乘缩放比例即可匹配位置
});

注意事项 #

• 如果你导出JPG的时候设置了自定义缩放，所有坐标、页面尺寸都要乘以相同的缩放比例，才能和JPG预览图的位置完全对齐
• 部分特殊链接（比如内部页跳转的链接）没有url字段，上述代码已经做了过滤，如果你需要处理内部跳转，可以自行保留dest字段做逻辑适配

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