CODEWITHSUNDEEP
javascripthtmlnavigationpdf.js
Tobia
Tobia

Reputation: 9506

Javascript Pdf navigation for pdf.js

Is it possibile to use pdf.js to render a PDF in a html page and manage its navigation? For navigation I mean zoom and pan. My goal is to add some button with pan (up, down, left, right) for zoom (zoom in ,zoom out, default zoom) and, if it's possibile, to automatically pan the document centering it in the click position.

Upvotes: 0

Views: 2999

Answers (1)

Vivek Pradhan
Vivek Pradhan

Reputation: 4847

The whole point of pdf.js is to render .pdf documents in HTML5. So what you're saying should be achievable. The project is quite well documented on Github and should be a good starting point. As far as the navigation and other toggle buttons for zooming and paning are concerned, they have been clearly implemented here and here.

So you could start by viewing the source of these demos first and then go through the documentation to fit your needs. Hope this gets you started in the right direction. I'm posting some relevant code snippet from one of the demos:

  var pdfDoc = null,
  pageNum = 1,
  pageRendering = false,
  pageNumPending = null,
  scale = 0.8,
  canvas = document.getElementById('the-canvas'),
  ctx = canvas.getContext('2d');

 /**
  * Get page info from document, resize canvas accordingly, and render page.
  * @param num Page number.
  */
 function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
 }

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
    if (pageNum <= 1) {
         return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}

document.getElementById('prev').addEventListener('click', onPrevPage);

...

/**
 * Asynchronously downloads PDF.
 */
PDFJS.getDocument(url).then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
}

Upvotes: 2

Related Questions