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

PDF.js - Printing multiple documents at once

本文关键字：打印一次文档 js PDF 更新时间：2023-09-26

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

每个文档的页面

（画布）被添加到具有类"pdfdoc"的div 中，以保持页面按文档排序。

我是Promises的新手，由于异步性质，我在确定何时调用window.print时遇到了麻烦。有时，它会在所有页面都可用之前被调用，即使我在调用它之前正在检查渲染承诺中最后一个文档的最后一页。下面是代码：

// 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？

对于任何感兴趣的人，我通过将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();