Вар не влияет вне функции?

Question

Я пытаюсь преобразовать HTML в PDF с помощью jsPDF. Однако переменная и вещи, которые происходят внутри функции, кажутся невидимыми для всего, что находится вне функции. Вот мой код:

$(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()), он прекрасно работает с отображаемой страницей. Тем не менее, я не могу сделать это, потому что я собираюсь использовать цикл для каждого для выполнения 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 - это обратный вызов, который будет выполнен после рендеринга изображения. В вашем коде вызывается сохранение перед добавлением изображения.

Answer 2

Тогда вы можете сохранить в onrendered

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