How can I restyle a word when rendering a pdf with pdf.js?

问题

When I runder a pdf with pdf.js I would like to be able to restyle some words (e.g. highlight) is this possible?

回答1:

Yes, it is possible to highlight words while working with PDF.js

As a page contains

a canvas (for the rendered content)
an HTMLDivElement (for the non-rendered text content)

you can use the latter one to select text elements.

Having access to the Selection API on your browser, you can get the selection via document.getSelection().

The following code demonstrates how to do that if the selected text does not (internally) span across multiple HTMLElements:

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;

For a selection that spans multiple (internal) HTMLElements you might be able to traverse the DOM starting at s.anchorNode by successively calling nextSibling until you reach at s.focusNode.

I say might, because elements can be positioned in the document in a different order than the one they have on the view.

Assuming s.anchorNode is not s.focusNode,

s.anchorNode would be highlighted from 0 to s.anchorOffset
s.focusNode from s.focusOffset until the end of the node and
all nodes between them could be highlighted entirely

This works (or at least might work) for text nodes - the idea could be extended to non-text nodes by surrounding each non-text node with the highlighting span.

来源：https://stackoverflow.com/questions/18621207/how-can-i-restyle-a-word-when-rendering-a-pdf-with-pdf-js

标签

javascript

pdf

pdf.js