javascript - 使用 pdf.js 渲染 pdf 时如何重新设置单词的样式？

Question

当我使用 pdf.js 运行 pdf 时，我希望能够重新设置某些单词的样式（例如突出显示），这可能吗？

Answer 1

是的，可以在使用 PDF.js 时突出显示单词

作为一个页面包含

• 画布（用于渲染的内容）
• 一个 HTMLDivElement（用于未呈现的文本内容）

您可以使用后者来选择文本元素。

在浏览器上访问Selection API后，您可以通过document.getSelection().

以下代码演示了如果所选文本（内部）不跨越多个 HTMLElement 时如何执行此操作：

var s = document.getSelection();

var oldstr = s.anchorNode.textContent;
var textBeforeSelection = oldstr.substr(0, s.anchorOffset);
var textInsideSelection = oldstr.substr(s.anchorOffset, s.focusOffset - s.anchorOffset);
var textAfterSelection  = oldstr.substr(s.focusOffset, oldstr.length - s.focusOffset);

foo.anchorNode.parentElement.innerHTML
  = textBeforeSelection 
  + "<span class='highlight'>" 
  + textInsideSelection 
  + "</span>" 
  + textAfterSelection;

对于跨越多个（内部）HTMLElements 的选择，您可以s.anchorNode通过连续调用从 at 开始遍历 DOM，nextSibling直到到达 at s.focusNode。

我说可能，因为元素在文档中的放置顺序与它们在视图中的顺序不同。

假设s.anchorNode不是s.focusNode，

• s.anchorNode将从 0 突出显示到s.anchorOffset
• s.focusNode从s.focusOffset直到节点结束和
• 它们之间的所有节点都可以完全突出显示

这对文本节点有效（或至少可能有效）——这个想法可以通过用突出显示范围包围每个非文本节点来扩展到非文本节点。