javascriptpdf.jspdfviewpdf-rendering

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


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 single Canvas using pdf.js and ImageData (2. answer).
But as a result, I rendered my document with all pages blank. All pictures and colors are fine, but not even a line of text. I also tried some other tutorials, but either I get the same result, or the document is completely missing. Right now, my code looks like this: (It's almost identical to the tutorial)

function loadPDFJS(pid, pageUrl){

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

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var pages = [];
    var currentPage = 1;

    var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';

    PDFJS.getDocument(url).then(function (pdf) {

        if(currentPage <= pdf.numPages) getPage();

        function getPage() {
            pdf.getPage(currentPage).then(function(page){
                var scale = 1.5;
                var viewport = page.getViewport(scale);

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };

                page.render(renderContext).then(function() {
                    pages.push(canvas.toDataURL());
                    if(currentPage < pdf.numPages) {
                        currentPage++;
                        getPage();
                    } else {
                        done();
                    }
                });
            });
        }
    });

    function done() {
        for(var i = 0; i < pages.length; i++){
            drawPage(i, addPage);
        }
    }

    function addPage(img){
        document.body.appendChild(img);
    }

    function drawPage(index, callback){
        var img = new Image;
        img.onload = function() {
            ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
            callback(this);
        }
        img.src = pages[index];
    }
}

Solution

  • 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]);
                    }
                }
            });
        }
    
        });
    }