javascript - 使用 Canvas 数据的 PDFMake 循环不能保持正确的顺序

Question

我正在使用以下代码将 DOM 元素呈现为 Canvas 数据，然后使用它们制作 PDF。

我必须为此创建一个循环，因为如果全部是一张图像，则不可能将数据正确地放置在多个页面上。

$scope.pdfMaker = function() {

    var content = [];

    var pdfElement = document.getElementsByClassName("pdfElement");
    for (var i = pdfElement.length - 1; i >= 0; i--) {
        html2canvas(pdfElement[i], {
            onrendered: function(canvas) {

                var data = canvas.toDataURL();

                content.push({
                    image: data,
                    width: 500,
                    margin: [0, 5]
                });
                console.log(canvas);
            }

        });
    }
    var docDefinition = {
        content: content
    };

    setTimeout(function() {
        pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
    }, 10000);

}

问题:

1. 我有令人讨厌的 10 秒超时以留出时间进行处理，我如何重组我的代码以允许在执行完所有 Canvas 数据后制作 PDF。

2. 我的 Canvas 元素在转换时变得困惑，正确的顺序至关重要。如何维护 DOM 元素的顺序？

Answer 1

看来 html2canvas 返回了一个 promise :

$scope.pdfMaker = function() {

    var promises = [];
    var pdfElements = document.getElementsByClassName("pdfElement");

    for (var i = 0; i < pdfElements.length; i++) {
        promises.push(
            html2canvas(pdfElements[i]).then(function(canvas) {
                console.log('finished one!');
                return {
                    image: canvas.toDataURL(),
                    width: 500,
                    margin: [0, 5]
                };
            })
        );
    }

    console.log('done calling');
    $q.all(promises).then(function(content) {
        console.log('all done');
        pdfMake.createPdf({ content: content }).download("Score_Details.pdf");
        console.log('download one');
    }, function(err) {
        console.error(err);
    })

}