how to jump to page of rendered pdf

2.3k views Asked by At

Im using pdfobject along with forcePDFJS which uses pdfjs viewer.js to render pdf's.. Once they are rendered I need to be able to jump to pages without reloading the document.. The documents can be pretty large

I've seen some mentions about using PDFApplicationViewer.pdfview.currentPageNumber. but I haven't seen a good example on how to use it correclty

I've seen two example of using the PDFApplicationViewer 1. PDFApplicationViewer.pdfview.currentPageNumber = pagNum; 2. document.getElementById('mycanvas').contentWindow.PDFApplicationViewer.pdfview.currentPageNumber = pagNum;

Althought the second on make more sense Im not sure where the contentWindow object from the element comes from. Im assuming the pdfobject embeds something that I could get access too but I can't figure it out..

Also, since I couldn't really find alot on this.. Is this even possible..

For time constraint reasons I don't want to have to put together a new viewer using pdfjs.. I like what comes with the viewer.html.. I just need to jump the pages without reloading

2

There are 2 answers

0
Daniel Cosio On BEST ANSWER

PDFObject.embed doesn't return any reference So I looked into the pdfObject code to see how it was embedding the pdf..

for this to work there needs to be a iframe.. So when rendering with pdfobject Im using a configureation as follows:

Notice forcePDFJS=true

    if(!pageNum)
    pageNum=1;
var options = {
    pdfOpenParams: {
        view: "FitV",
        page: pageNum               
    },
    forcePDFJS: true,
    PDFJS_URL: "../pdfjs/web/viewer.html"
};

Here is code that works

var pdfviewer = document.getElementById('pdfviewer');//get the viewer element
var contenttag =  pdfviewer.getElementsByTagName("iframe")[0]//got this from pdfobject code
contenttag.contentWindow.PDFViewerApplication.pdfViewer.currentPageNumber = parseInt(pageNum);//change the page
0
CeamKrier On

In my case, the pdfviewer id is not available anymore.

PDFObject does return the reference of iframe that it creates. I was using basic HTML + JS so I had to save that reference to global window object to be able to access it from anywhere in the project.

Code screenshot

Finally, with the reference we have, we can access the PDFViewerApplication object as below and manipulate the PDF:

enter image description here