javascript - var 在功能之外不受影响？

Question

我正在尝试使用 jsPDF 将 html 转换为 pdf。然而，变量和函数内部发生的事情似乎对函数外部的一切都是不可见的。这是我的代码:

$(document).ready(function() 
{
    $("#runpdf").click(function(event) 
    {
        var doc = new jsPDF();
        var imageData;
        html2canvas($("#page1"),
        {
            logging:true,
            profile:true,
            allowTaint:true,
            letterRendering: true,
            onrendered:function(canvas)
            {
                imageData= canvas.toDataURL("image/jpeg");      
                doc.addImage(imageData, 'JPEG', 0, 0, 200, 200);

            }
        });
        doc.save('test.pdf');
    });
});

运行此命令后，会呈现一个空白页面，值得注意的是，函数 html2canvas 中的所有内容实际上并未影响 var doc。但是，将 doc.save('test.pdf'); 位放入函数内(在 doc.addImage() 之后)，它会在页面正常执行呈现。但是，我不能这样做，因为我将使用 for-each 循环在多个页面上多次执行 html2canvas 函数，然后在最后保存文档。但这行不通，因为 doc.save() 似乎需要与其他部分处于同一函数中。我怎样才能避免这个问题？

谢谢
编辑:使用计数器和简单的 if 语句修复了问题。

var doc = new jsPDF("p", "pt", "letter");
$(document).ready(function () 
{
    $("#runpdf").click(function (event) 
{
    $(document.body).width(1903);
    var count=0;
    $("section").each(function()
    {
        $(this).children('footer').children('article').append($(document.createElement('span')).text((count+1)+".").css("float","right").css("font-weight", "900").css("font-size","150%"));
        count++;
    });    
    var pages = $(".page5");
    var remaining = pages.length;
    pages.each(function () 
    {        
        html2canvas($(this), 
        {
            logging: true,
            profile: true,
            allowTaint: true,
            letterRendering: true,
            onrendered: function (canvas) 
            {
                var imageData = canvas.toDataURL("image/jpeg");
                doc.addImage(imageData, 'JPEG', -425, 0, 1450, 800);
                remaining--;
                if (remaining === 0) 
                {
                    doc.save('test.pdf');
                }
                doc.addPage();
            }
        });

    });

});
});

谢谢大家的帮助

Answer 1

添加图片后需要保存:

    html2canvas($("#page1"),
    {
        logging:true,
        profile:true,
        allowTaint:true,
        letterRendering: true,
        onrendered:function(canvas)
        {
            imageData= canvas.toDataURL("image/jpeg");      
            doc.addImage(imageData, 'JPEG', 0, 0, 200, 200);
            doc.save('test.pdf');

        }
    });

onrendered 函数是一个回调函数，将在图像渲染完成后执行。在您的代码中，在添加图像之前调用保存。