如何在PDFJS Viewer中正确启用并显示注释

我看了你遇到的问题——用PDF.js的Viewer组件时，注释没法像官方Demo那样正常显示，Chrome和Safari里都出问题，但官方Demo却完全正常。结合你贴的初始化代码，我整理了几个关键调整点，应该能解决你的问题：

1. 显式启用注释层工厂 #

你的初始化代码里缺少了注释层相关的配置，PDF.js默认不会自动初始化注释渲染组件。你需要在创建PDFViewer实例时，添加annotationLayerFactory参数，确保注释层能被正确渲染：

首先确认你已经引入了注释层工厂模块，然后修改初始化代码：

// 从pdfjsViewer中解构出注释层工厂（如果还没做的话）
const { PDFAnnotationLayerFactory } = pdfjsViewer;

// 初始化PDFViewer时添加注释层配置
pdfViewer = new (pdfjsViewer as any).PDFViewer({
  eventBus,
  container,
  removePageBorders: true,
  linkService: pdfLinkService,
  findController: pdfFindController,
  // 新增：添加注释层工厂实例
  annotationLayerFactory: new PDFAnnotationLayerFactory(),
});

2. 必须引入PDF.js官方的Viewer样式文件 #

官方Demo里的注释能正常显示，很大程度依赖于viewer.css里的注释层样式——包括注释的位置、外观、交互状态（比如hover效果）。如果你的应用没引入这个样式，注释可能会因为没有样式而“隐身”或者位置错乱。

确保在HTML中引入这个样式文件：

<!-- 替换成你项目中pdfjs-dist的路径 -->
<link rel="stylesheet" href="path/to/pdfjs-dist/web/viewer.css">

3. 验证注释是否被正确解析 #

有时候问题出在注释解析环节，而非渲染。你可以在PDF文档加载完成后，手动检查是否能获取到注释数据：

// 假设你已经通过pdfjsLib.getDocument()获取到了pdfDoc实例
pdfDoc.getAnnotations().then(annotations => {
  console.log("当前文档的注释列表:", annotations);
  if (annotations.length === 0) {
    console.warn("未检测到注释，要么文档本身无注释，要么解析过程出错");
  }
});

如果这里能拿到正常的注释数据，那问题大概率在渲染层（样式或组件配置）；如果拿不到，可能需要检查文档加载时是否禁用了注释解析（比如disableAnnotationRendering这类配置）。

4. 调整TextLayerMode配置 #

你当前设置的TextLayerMode.ENABLE_ENHANCE主要用于增强文本选择体验，但某些场景下可能会和注释层的渲染顺序冲突。可以暂时改成基础的ENABLE模式测试：

pdfViewer.textLayerMode = TextLayerMode.ENABLE;

如果修改后注释正常显示了，再考虑是否需要针对ENABLE_ENHANCE做额外适配。

5. Safari浏览器的额外适配 #

Safari对DOM和Canvas的渲染有特殊限制，除了你已经设置的maxCanvasPixels，还可以尝试开启注释层的脚本支持，确保注释的交互和渲染正常：

// 创建注释层工厂时添加配置
const annotationLayerFactory = new PDFAnnotationLayerFactory({
  enableScripting: true,
});

内容的提问来源于stack exchange，提问作者Jørgen Rasmussen