javascript - PDF.js - 一次打印多个文档

Question

我需要将多个 PDF 放置在由 AJAX 响应确定的页面上，当所有文档和页面都呈现后，调用 window.print。

每个文档的页面( Canvas )都被添加到类为“pdfdoc”的 div 中，以保持页面按文档排序。

我是 Promises 的新手，由于异步性质，我无法确定何时调用 window.print。有时它会在所有页面可用之前被调用，即使我在调用它之前检查呈现 promise 中最后一个文档的最后一页。下面是代码:

// 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);
    }
}

有谁知道在渲染所有文档和页面后如何调用 window.print？

Answer 1

对于任何感兴趣的人，我通过将 PDFJS.getDocument() 包装在一个带有回调“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();
        }
    });
}

然后在回调中调用它:

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();