How to add toolbar viewer to PDF.js

avatar
678    1 year ago

I'm trying to implement PDF.js on my project, but it's being harder than expected.

At the moment, I'm able to render a entire PDF inside a div, but I'm not able to render the standard toolbar viewer; you can see an example what I want at top of this demo page: https://mozilla.github.io/pdf.js/web/viewer.html

My JS code looks like this at the moment:

var url = '/filemanager/example.pdf';
var pdfScale = 1;
PDFJS.workerSrc = '/js/pdfJs/build/pdf.worker.js';

function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: pdfScale };

    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}

renderPDF(url, document.getElementById('the-canvas'));
<div id="the-canvas" class="text-center" style="overflow: auto; max-height: 450px"></div>

So... how can I the toolbar viewer with all controls like demo page?

Answers { 1 }
avatar
1 year ago

Please have a look at this video: https://www.youtube.com/watch?v=TstpR_gGb-4

Supposedly, after you have downloaded the pdf.js, and have the pdf in the "web" folder, it will work (with the toolbar) without any code needed.