使用viewer.js打印含高亮文本的PDF失败，寻求正确解决方向

以下是针对该问题的可行解决方向：

1. 强制提升高亮样式的打印优先级 #

Viewer.js的高亮文本通常通过DOM层的.textLayer .highlight元素实现，默认样式可能被打印样式覆盖。你需要确保打印样式的优先级足够高，添加以下CSS代码到Viewer的样式文件中：

@media print {
  /* 强制打印高亮背景色 */
  .textLayer .highlight {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    opacity: 1 !important;
    background-color: #ffd700 !important; /* 替换为你的高亮颜色 */
    background-image: none !important;
    box-shadow: none !important;
  }
  /* 确保页面容器不裁剪高亮元素 */
  .pdfViewer .page {
    overflow: visible !important;
    position: relative !important;
  }
}

注意：如果是动态注入样式，要确保代码在Viewer加载完成后执行。

2. 修正Viewer.js的打印逻辑 #

部分Viewer.js版本打印时会仅渲染Canvas的PDF内容，忽略DOM层的高亮元素。你需要修改打印相关代码：

• 找到Viewer.js中处理打印的print()方法（通常在Viewer类内），确保打印时将包含高亮的整个页面容器（而非仅Canvas）作为打印目标。
• 如果Viewer使用Canvas转图片的打印方式，需额外将高亮绘制到Canvas上：遍历所有.highlight元素，获取它们相对于页面的坐标和尺寸，然后在对应页面的Canvas上下文绘制矩形高亮。

3. 检查浏览器打印的隐藏设置 #

除了勾选「背景图形」，还要确认：

• 在Chrome打印设置中，取消勾选「简化页面」选项（部分版本位于「更多设置」里）。
• 进入浏览器高级设置，确保没有开启「打印时不显示背景颜色和图像」的强制选项。

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