<Div> Layer on Top of PDF

Add HTML/CSS overlays by text location on pdf document when rendering in pdf.js viewer

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

Div does not get over PDF in IE8 / IE9 but works on FF & Chrome

Found a solution here
You basically need to insert and empty iframe below the div but overlaying the PDF and play with Z-index : pdf (1), background iframe (50), content div (100).

Add div on every page (ngx-extended-pdf-viewer)

That's simply not a use-case I had in mind when I created ngx-extended-pdf-viewer. :) However, I assume you can use the (pageRendered) event to achieve your goal. I'm puzzled zooming redraws that HTML code, too. Maybe that's a side-effect of (pageRendered). If not, you'll also want to catch the (zoomChange) event to check if you need to add the div again.

Is it possible to use PDF as HTML page background in CSS?

Setting it as a background, no, not possible. You may be able to get away with an ugly hack, but... I think you need to rethink what you're trying to accomplish and find an alternative solution.

PDF is a proprietary format and therefore does not play well with open web languages.

---

Related Topics