在 PDF.js 中，如何隐藏画布并以完全不透明的方式显示底层文本？

当 PDF.js 将 PDF 处理为 HTML5 时，它会放置一个<canvas>超过所有的<div>包含文本的元素。该画布是 PDF 的正确渲染，而下面的文本非常粗糙（但足以满足某些目的，例如搜索单词）。

使用PDF.js 演示页面 https://mozilla.github.io/pdf.js/web/viewer.html，我可以通过以下方式使底层文本可见：

1. 删除<canvas>元素。

2. 禁用color: transparent财产在.textLayer类，作用于底层文本。

...但是，文本仍然是低不透明度，并且我找不到控制此效果的 CSS（见下文）：

之前 - 带画布

应用上述两个步骤后

有没有办法使用 JavaScript 手动将文本恢复为完全不透明？或者更好的是，是否有一种特殊的方法来调用 PDF.js，以便它仅显示底层文本，并完全丢弃画布（或禁用所有文本使用的画布）？

好吧，重复你的步骤，我

• removed .textLayer > div { color: transparent; },
• added .pdfViewer .canvasWrapper { display: none; }
• 最后更改文本层的不透明度.textLayer { opacity: 1.0; }.

最后一个成功了。

要通过 JS 以编程方式执行此操作，您可以使用：

var mainCSS = document.styleSheets[0];
mainCSS.insertRule(".textLayer { opacity: 1.0; }", 1);
mainCSS.insertRule(".textLayer > div { color: initial !important; }", 1);
mainCSS.insertRule(".pdfViewer .canvasWrapper { display: none; }", 1);

The !important after color: initial用于防止原始 CSS 定义（color: transparent）免于被应用。

Edit:

为了防止文本绘制到画布上，您可以禁用用于绘制文本的函数（即fillText and strokeText).

CanvasRenderingContext2D.prototype.strokeText = function () { };
CanvasRenderingContext2D.prototype.fillText = function () { };

这样您就不必修改 PDF.js 本身的代码。

如果你想保留功能strokeText and fillText您可能愿意调整功能showText and paintChar（在 pdf.js / pdf.worker.js 内）。