How can I programmatically:
Using the locations in the native PDF coordinate system?
The goal here is to be able to, for example, highlight all occurrences of a phrase or add interactive design elements that are positioned according to the location of text that I have already parsed out of the document on the back end.
As a specific example, if know the phrase 'This is my Text.' is located on page 4 of my pdf document, and the box defining the position of this text on the page in the native pdf coordinate system is
bottom left corner = (0,0)
top right corner = (14, 5)
Is it possible to 1) scroll down to that line of the document so it is visible, and 2) overlay a div over this location?
I see that this is essentially what the built in 'text search', 'find next', and 'find prev' functionality it doing, but having some trouble interpreting the code.
To embed the PDF in the HTML window, point the page to a document and then specify the height and width of the PDF so the HTML window is the correct size using the code: <embed src="filename. pdf" width="500" height="375">. Note that an embedded PDF may look very different on different browsers and operating systems.
PDF. js is an open-source JavaScript PDF viewer that renders PDF using web standards-compliant HTML5. Primarily seen in Mozilla Firefox's as the built-in PDF viewer, PDF. js also serves as an easy way for developers and integrators to embed PDF viewing capabilities in a web app or server.
All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.
src = 'bar. pdf'; ...it will work.
PDF.js defines so called PageViewport which allows to convert between PDF coordinates and presentation on the screen. To create a viewport see PDF page's getViewport. Convert coordinates to on-screen presentation: var screenRect = viewport.convertToViewportRectangle([0, 0, 14, 5]);
Normalize coordinates and overlay div on the canvas.
API for the generic viewer is not defined yet. However you can get a page view using viewer component: var pageView = PDFViewerApplication.pdfViewer.getPageView(3); // get page 4 view
. The pageView will have viewport
and div
-container. (Since API is not defined yet, names and arguments might change) If you are using viewers containers, please notice that they are periodically cleaned up during zooming/scroll -- draw your stuff after pagerendered
event.
Scrolling is just showing pageView.div
at the region screenRect
in the current view.
var pageNumber = 4;
var pdfRect = [0,0,140,150];
var pageView = PDFViewerApplication.pdfViewer.getPageView(pageNumber - 1);
var screenRect = pageView.viewport.convertToViewportRectangle(pdfRect);
var x = Math.min(screenRect[0], screenRect[2]), width = Math.abs(screenRect[0] - screenRect[2]);
var y = Math.min(screenRect[1], screenRect[3]), height = Math.abs(screenRect[1] - screenRect[3]);
// note: needs to be done in the 'pagerendered' event
var overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'background-color: rgba(255,255,0,0.5);position:absolute;' +
'left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;');
pageView.div.appendChild(overlayDiv);
// scroll
scrollIntoView(pageView.div, {top: y});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With