使用PDF.js渲染TextLayer时内容与Canvas不一致的问题求助

问题原因与修复步骤 #

1. 关闭文本标准化导致错位 #

你在调用page.getTextContent时设置了disableNormalization: true，这个参数会禁用PDF.js对文本坐标、字符间距的标准化处理，直接使用PDF原始文本数据，这会导致TextLayer的文本位置和Canvas渲染内容无法对齐。

修复：
移除disableNormalization: true参数（默认值为false），或显式设置为false：

return page.getTextContent({includeMarkedContent: true});
// 或者显式设置：
// return page.getTextContent({includeMarkedContent: true, disableNormalization: false});

2. TextLayer父容器缺少相对定位 #

你的canvasWrapper未设置position: relative，而TextLayer是position: absolute，这会导致TextLayer相对于整个文档而非canvasWrapper定位，最终出现偏移错位。

修复：
为canvasWrapper添加相对定位样式：

const canvasWrapper = document.createElement("div")
canvasWrapper.style.width = "800px"
canvasWrapper.style.position = "relative" // 新增该行

3. 冗余参数引发渲染冲突 #

调用pdfjs.renderTextLayer时同时传递了textContentSource和textContent，这两个参数功能重复（textContentSource是旧版参数），可能触发渲染逻辑冲突。

修复：
仅保留textContent参数：

pdfjs.renderTextLayer({
  textContent: textContent,
  container: textLayer!,
  viewport: viewport,
  textDivs: []
} as TextLayerRenderParameters);

4. 确保Viewport一致性 #

确认渲染Canvas和TextLayer使用的是同一个viewport实例，避免在渲染过程中对viewport进行缩放、旋转等修改，否则会导致两者内容比例或位置不匹配。

textDivs与textDivProperties的影响说明 #

• textDivs：用于传入已创建的文本DOM元素数组，实现TextLayer的DOM复用。如果传入空数组，PDF.js会重新创建所有文本div；如果传入的旧div未更新位置、样式，可能导致文本错位。正常使用空数组不会引发问题，但自定义复用逻辑时，需确保每个div的位置与当前viewport匹配。

• textDivProperties：用于为每个文本div添加自定义属性或样式（如class、data-*属性、内联样式）。如果设置了影响位置、尺寸的样式（比如margin、position），可能会导致TextLayer文本偏移；仅添加非布局类属性时，不会影响文本与Canvas的匹配度。

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