Jump to page in PDF.js with javascript

Question

I'm trying to use PDF.js' viewer to display pdf files on a page.

I've gotten everything working, but I would like to be able to 'jump to' a specific page in the pdf. I know you can set the page with the url, but I would like to do this in javascript if it's possible.

I have noticed that there is a PDFJS object in the global scope, and it seems that I should be able to get access to things like page setting there, but it's a rather massive object. Anyone know how to do this?

Solution 1

You can set the page via JavaScript with:

var desiredPage = [the page you want];
PDFViewerApplication.page = desiredPage;

There is an event handler on this, and the UI will be adjusted accordingly. You may want to ensure this is not out of bounds:

function goToPage(desiredPage){
    var numPages = PDFViewerApplication.pagesCount;
    if((desiredPage > numPages) || (desiredPage < 1)){
        return;
    }
    PDFViewerApplication.page = desiredPage;
}

Solution 2

In my case I was loading pdf file inside iframe so I had to do it in other way around.

function goToPage(desiredPage){
var frame_1 = window.frames["iframe-name"];
var frameObject = document.getElementById("iframe-id").contentWindow;
frameObject.PDFViewerApplication.page = desired page;
}

Solution 3

if Pdf shown into iframe and you want to navigate to page then use below code. 'docIfram' is iframe tag Id.

document.getElementById("docIframe").contentWindow.PDFViewerApplication.page=2

Comments

[Vinay]

How do i get access to/intialize PDFViewerApplication ?

[Geoff Lentsch]

it is a variable in pdf.js. It looks like they are working on their documentation, but you can view the code: mozilla.github.io/pdf.js/web/viewer.js

[vmasanas]

Is there any event that could be used to get a notification when the users navigates to another page.