How to render whole pdf document using pdf.js library?

Question

I tried rendering PDF document using pdf.js library. I know only basics in javascript and I am new to promises, so at first I followed advice on this page: Render .pdf to si

Answer 1

K so I just looked at my code again and I started all over. I made it simpler and I finally got it to work. Now it looks like this:

var canvasContainer = document.getElementById('pdfImageImg');
function loadPDFJS(pid, pageUrl){

    PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';

    var currentPage = 1;
    var pages = [];
    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

    PDFJS.getDocument(url).then(function(pdf) {
            pdf.getPage(currentPage).then(renderPage);

    function renderPage(page) {
        var height = 700;
        var viewport = page.getViewport(1);
        var scale = height / viewport.height;
        var scaledViewport = page.getViewport(scale);

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: scaledViewport
        };
        page.render(renderContext).then(function () {
            if(currentPage < pdf.numPages) {
                pages[currentPage] = canvas;
                currentPage++;
                pdf.getPage(currentPage).then(renderPage);
            } else {
                for (var i = 1; i < pages.length; i++) {
                    document.getElementById('pdfImageImg').appendChild(pages[i]);
                }
            }
        });
    }

    });
}