How to add UI and toolbar to PDF.js viewer?

Question

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?

have you tried applying this: http://mozilla.github.io/pdf.js/web/viewer.js — gabrielchl, Aug 06 '17 at 14:12
that was actually from https://mozilla.github.io/pdf.js/web/viewer.html — gabrielchl, Aug 06 '17 at 14:36
@GabrielChiHongLee I know it, but I don't know how to use it in my project. Can you give me any suggestion? — Isaac Bosca, Aug 07 '17 at 15:20
@IsaacBosca you can just reference view.html with the file attribute being the location to your pdf, ie `http://www.example.com/viewer.html?file=http://www.example.com/file.pdf`per documentation here, https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website — Jeff Beagley, Oct 30 '17 at 19:20

score 5 · Answer 1 · answered Oct 23 '20 at 17:30

Unfortunately PDF.js package maintainers have decided to remove viewer.html from their pre-built distribution NPM package because:

There is a concern that end users mistake Firefox PDF Viewer with custom web site deployment, which will add support load to us.

You could copy this folder manually, but it would mean you would also need to update it manually, which is less than ideal approach for modern web application development.

While they have released reusable components for web developers, there is not much information on how to actually leverage these:

We are slowly refactoring the viewer to provide set of embeddable APIs, so custom viewer can be easy deployed on a custom web site, also moving burden of the UI customization on web site developers. See web/pdf_viewer files and examples at https://github.com/mozilla/pdf.js/tree/master/examples/components and #5552

All the examples, articles, and 3rd party packages (for my framework of choice) that I've come by are implementing their own UI features.

If someone has more examples on how to built upon PDF.js components, we are interested to read more about it.

How to add UI and toolbar to PDF.js viewer?

1 Answers1