如何修复 React-pdf 查看器中的乱码文本？

Question

我使用react-pdf创建了一个pdf查看器。当我显示某些 pdf 时，文本断断续续且难以阅读。我尝试过放大和缩小文档，但它在不同的比例下以不同的方式出现断断续续的情况。有时，在缩小然后放大后，文本在一定比例下甚至看起来还不错。

（1.5 比例的示例）

（1.6 比例的示例）

起初，我认为这可能是react-pdf的问题，但我发现react-pdf基本上是PDF.js的包装器。我发现我可以在PDF.js 演示页面中复制该问题。

不幸的是，我正在处理包含识别信息的 pdf，因此我无法共享完整的 pdf 或完整屏幕截图。我将尽可能多地分享。

我尝试过的

我最初的想法是，组件可能最初渲染得很小，然后在扩展时出现了问题。所以我把初始尺寸做得很大，但这并没有解决问题。
我确保按照react-pdf主页上的说明包含标准字体
我尝试使用在线 pdf 修复工具来修复 pdf 本身。那没有帮助。
我尝试将更改为Document api 文档中详细说明的renderMode内容。这是最有用的修复，因为它确实正确渲染了文本，但随后却导致 pdf 上的图像无法加载。'svg'

感谢您的帮助/建议。

如果我能找到一种方法来编辑 pdf 使其不包含敏感信息，我会尝试找到一个地方使其可用于测试。很抱歉目前无法提供该信息。我知道，当你自己无法复制时，很难给出建议。我会努力解决这个问题。

Answer 1

从编程的角度来看，只有“提供 standardFontDataUrl 并禁用字体”（见下文），但是它会影响许多基于 pdf.js 的代码开发人员的输出，因此我认为仍然是“OnTopic”

这个问题在react-pdf中仍然悬而未决，尽管我从年中开始就看到其他pdf.js用户提到过这个问题（MS或Chrome更新？），所以不确定这是否是影响Mozilla PDF.js代码用户的更广泛的失败。

似乎早在三月初就有报道，后来又建议更换获胜 10 名车手。不过，win 11 Pro 用户也报告了这一情况。 PDF.js 版本从 2.8.335 到 2.14.305，并且不影响版本 2.7.570。所以部分下降到更新版本！但仅在 Chromium 中可见。

我们完全有可能开始做一些让 Chrome 绊倒的事情，

这些症状似乎是针对硬件或设置的，因为据报道，它出现在一些相同的用户组上，但不会影响其他用户。

在单页视图和多页视图之间来回切换即可解决问题。它似乎也取决于分辨率，或者出现在某些机器上而不是其他机器上，因此重现起来有点棘手。

我个人并不明白，但我团队中的一个人明白了。

不清楚哪些浏览器受到影响，但看起来像是 chromium/web kit 渲染错误？

已经测试了多种浏览器，只有 chrome 面临这个问题。

我的同事在 Edge 版本 101.0.1210.47（官方版本）（64 位）和 Brave（1.38.118 Chromium 101.0.4951.67）中得到相同的结果将编辑问题

建议的解决方法是：-

提供 standardFontDataUrl 并禁用字体可以解决此问题。
如果我们在 chrome://flags 中禁用加速 2D 画布，则预览看起来不错。但由于此标志默认处于启用状态，因此用户会看到像素化预览。除非我们要求他们关闭这个标志。

发现只有在 Chrome 设置中启用硬件加速时才会发生这种情况。

在我的情况下，在地址栏粘贴chrome://gpu等edge://gpu（其当前板载修复的长报告）中（当前通过重新启动我的 Edge 尚未确认）显示加速 2D 画布不可用：通过阻止列表或命令行禁用。禁用功能： 2d_canvas，因此我看不到问题。

要更改设置，您可以使用
chrome://flags/#disable-accelerated-2d-canvas
，但它是选项之间的手动选择。

所以重启后我看到

Graphics Feature Status
Canvas: Hardware accelerated
Canvas out-of-process rasterization: Disabled

但 domo 几乎没有问题（除了作为像素的正常模糊文本），因此边缘更新或我的硬件没有明显受到影响，或者我的默认设置是合理的。

这是一个非常有帮助的答案。感谢您的研究。但我确实同意@Michał Perłakowski 的观点。我无法控制用户计算机上的 Chrome 标志，因此虽然这确实有帮助，但并不能完全解决问题。 (2认同)

Answer 2

这个问题终于在最新版本的react-pdf库中得到了修复。检查这里：https ://github.com/wojtekmaj/react-pdf/releases/tag/v6.2.2