PDF.js - Printing multiple documents at once

Question

I need to place multiple PDFs on a page determined by an AJAX response, and when all documents and pages have rendered, call window.print.

The pages (canvases) of each document are being added to a div with class 'pdfdoc' to keep the pages in order by document.

I'm new to Promises, and I'm having trouble determining when to call window.print because of the async nature. Sometimes it is being called before all the pages are available even though I'm checking for the last page of the last document in the render promise before calling it. Below is the code:

// Called on each iteration of coredatalist
var getDoc = function(count) {
    PDFJS.getDocument(srcUrl).then(function(pdf) {
        var currentPage = 1;
        $('<div class="pdfdoc" id="doc' + count + '"></div>').appendTo('body');
        getPage(pdf, currentPage, count);
    });
};

// Called for each page in PDF
var getPage = function(pdf, currentPage, count) {
    pdf.getPage(currentPage).then(function(page) {
        var scale = 2,
            viewport = page.getViewport(scale),
            canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            renderContext = {
                canvasContext: context,
                viewport: viewport,
                intent: 'print'
            };

        // Prepare canvas using PDF page dimensions

        canvas.setAttribute('class', 'canvaspdf');
        canvas.id = 'canvas' + currentPage;
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context

        page.render(renderContext).then(function(page) {
            $('#doc' + count).append(canvas);
            if (currentPage < pdf.numPages) {
                currentPage++;
                getPage(pdf, currentPage, count);
            } else {
                if (parseInt(count) === coredatalist.length - 1) {
                    window.print();
                }
            }
        });
    });
};

// Iterate through JSON object from AJAX request
for (var j in coredatalist) {
    if (coredatalist.hasOwnProperty(j)) {
        srcUrl = coredatalist[j].props.downloaduri;
        getDoc(j);
    }
}

Does anyone know how to call window.print after all documents AND pages are rendered?

SchattenJager · Accepted Answer · 2015-03-30 17:11:27Z

5

For anyone interested, I fulfilled my requirements by wrapping PDFJS.getDocument() inside a function with a callback 'next':

loadPdf: function (pdfUrl, pdfindex, next) {
    var self = this;
    PDFJS.getDocument(pdfUrl).then(function (pdf) {

        var currentPage = 1;
        function getPage() {
            pdf.getPage(currentPage).then(function (page) {
                var scale = 2,
                    viewport = page.getViewport(scale),
                    canvas = document.createElement('canvas'),
                    context = canvas.getContext('2d'),
                    renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                        intent: 'print'
                    };

                // Prepare canvas using PDF page dimensions

                canvas.setAttribute('class', 'canvaspdf');
                canvas.id = 'canvas' + currentPage + '-' + pdfindex;
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render PDF page into canvas context

                page.render(renderContext).then(function (page) {
                    document.body.appendChild(canvas);
                    if (currentPage < pdf.numPages) {
                        currentPage++;
                        getPage();
                    } else {
                        next();
                    }
                });
            });
        }

        if (currentPage < pdf.numPages) {
            getPage();
        }
    });
}

And then calling it within the callback:

var pdfUrls = [],

    next = function () {
        if (pdfUrls.length === 0) {
            window.print();
        } else {
            self.loadPdf(pdfUrls.pop(), pdfUrls.length, next);
        }
    };

for (var j in coredatalist) {
    if (coredatalist.hasOwnProperty(j)) {
        pdfUrls.push('url');
    }
}

next();

answered Mar 30, 2015 at 17:11

SchattenJager

3334 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stavros_S Over a year ago

Did you notice large differences between how the print outs looked depending on which browser you printed from? Also, how has your rendering performance been when using IE? It's really slow for me in my project.

Gaurav joshi Over a year ago

@SchattenJager Is this working for u??.... in my case it is not working

Collectives™ on Stack Overflow

PDF.js - Printing multiple documents at once

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related