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

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

Answer 2

那么你可以保存在onrendered

onrendered:function(canvas)
            {
                imageData= canvas.toDataURL("image/jpeg");      
                doc.addImage(imageData, 'JPEG', 0, 0, 200, 200);
                doc.save('test.pdf');
            }