如何通过WeasyPrint传递HTML元数据至PDF并在react-pdf中访问？

一、先搞懂PDF里那串Dests参数的意思 #

你用qpdf看到的那段结构是PDF的命名目标（Named Destinations），就是WeasyPrint把HTML元素的ID转过去的结果：

<<  /Names <<    /Dests <<      /Names [        (my-id)        [          25 0 R          /XYZ          67.25          810.889736          0        ]      ]    >>  >>>>

每个参数的作用：

• (my-id)：完全对应你HTML里的id="my-id"，是这个目标的唯一标识
• 25 0 R：PDF内部的页面对象引用，直接指向这个ID元素所在的页面
• /XYZ：定位类型，意思是要跳转到页面上的某个具体坐标点
• 67.25：目标点的X坐标（PDF坐标系以左下角为原点，单位是1/72英寸）
• 810.889736：目标点的Y坐标
• 0：缩放比例，0表示保持当前视图的缩放大小

二、在react-pdf里拿到这些元数据 #

react-pdf是基于pdf.js封装的，你可以通过Document组件的onLoadSuccess回调拿到PDF文档实例，然后直接获取所有命名目标：

直接上代码示例 #

import { Document, Page, pdfjs } from 'react-pdf';

// 注意：react-pdf v7及以上需要配置worker路径
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

export default function PDFViewer() {
  let allDestinations = {};

  const onPDFLoaded = async (pdfDoc) => {
    // 获取所有命名目标，键就是HTML里的ID
    allDestinations = await pdfDoc.getDestinations();
    console.log('所有目标数据:', allDestinations);
    
    // 找你要的my-id对应的信息
    const target = allDestinations['my-id'];
    if (target) {
      // 解析出来的格式是 [定位类型, 页面索引, X坐标, Y坐标, 缩放]
      const [type, pageIndex, x, y, zoom] = target;
      console.log('my-id的详细信息:', {
        pageNumber: pageIndex + 1, // pdf.js页码从0开始，转成咱们习惯的1开头
        x,
        y,
        zoom,
        type
      });
    }
  };

  return (
    <Document
      file="/你的PDF文件路径.pdf"
      onLoadSuccess={onPDFLoaded}
    >
      <Page pageNumber={1} />
    </Document>
  );
}

关键说明 #

• pdfDoc.getDestinations()：返回一个Promise，解析后是个对象，键是HTML里的ID，值是目标数组，已经帮你把PDF里的页面引用（比如25 0 R）转成了直接可用的页面索引，不用自己解析
• 页面索引：pdf.js里页面是从0开始计数的，要转成用户习惯的页码得加1

三、拿到数据后能做啥 #

你可以用这些元数据实现：

• 跳转到指定ID位置：通过Page组件的scale、offsetX、offsetY调整视图，或者用react-pdf的Link组件做内部跳转
• 做目录导航：侧边栏放目录列表，点击对应条目直接跳转到目标页面和位置
• 定位元素区域：如果需要在PDF渲染时高亮某个ID对应的区域，可以用坐标计算视图偏移

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