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

当PDF.js处理PDF到HTML5时，它会在包含文本的所有元素上放置一个

。此画布是PDF的适当呈现，而下面的文本相当粗糙（但足以用于某些目的，如搜索单词）

使用，我可以通过以下方式使基础文本可见：

删除

元素

禁用作用于基础文本的

.textLayer

类上的

color:transparent

属性

。。。但是，文本的不透明度仍然很低，我找不到控制这种效果的CSS（见下文）：

之前-使用画布

在应用上述两个步骤之后

---

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

好吧，重复您的步骤，我

• 已删除

  .textLayer>div{color:transparent；}

  ,
• 添加了

  .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);

！重要信息

在

color:initial

之后使用，以防止应用原始CSS定义（

color:transparent

）

编辑：

要防止将文本绘制到画布，可以禁用用于绘制文本的功能（即

fillText

和

strokeText

）

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

---

如果您想保留

strokeText

和

fillText

的功能，您可能愿意调整函数

showText

和

paintChar

（在pdf.js/pdf.worker.js中）。

我肯定OP希望保留图像。保存图像肯定是理想的，但我不知道这有多可行（HTML5Canvas是否支持根据对象类型选择和隐藏/编辑对象？我对此表示怀疑）。因为我认为仅仅通过调整DOM是无法做到这一点的，所以对于真正了解PDF.js功能的人来说，这是一个问题。如果有这样的答案出现，我会把这个问题留一天讨论，否则我很乐意接受这个答案。@async5-根据一个漂亮的解决方案调整了答案；非常有用的想法在编辑，谢谢！值得注意的是，

showText

&

paintChar

现在在

canvas.js

PDF中的文本是一个技巧主题——如果您不关心图像，请使用getTextContent（project repo中只有文本示例），将文本作为DOM元素保留在页面上对我来说很重要；据我所知，

getTextContent（）

只获取内部文本。我错了吗？getTextContent（）获取内部文本、位置和回退字体样式。存在通过api公开的renderTextLayer函数来呈现DOM

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