var不受函数的影响？ [英] var not affected outside of function?

问题描述

我试图用jsPDF将html转换为pdf。然而，函数内部发生的变量和事情似乎对函数外的所有内容都是不可见的。这是我的代码：

  $（document）.ready（function（）
 {
 $（ #runpdf）点击（函数（事件）
 {
变种DOC =新jsPDF（）; 
变种的imageData; 
 html2canvas（$（ ＃第1页）， 
 {
 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'）; bit（在 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（'页脚 '）。儿童（' 文章 '）。追加（$（使用document.createElement（' 跨'））。文本（（数+ 1）+  ）。CSS（ 浮动， 右）。CSS （font-weight，900）。css（font-size，150％））; 
 count ++; 
}）; 
 var pages = $（ （$（$））; 
 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）; 
剩余 - ; 
 if（remaining === 0）
 {
 doc.save（'test.pdf'）; 
} 
 doc.addPage（）; 
} 
}）; 
 
}）; 
 
}）; 
}）; 
  



感谢你的帮助，每个人

$ b $您需要在添加图片后进行保存： > html2canvas（$（＃page1），
{
日志记录：true，
profile：true，
allowTaint：true，
letterRendering ：真，
onrendered：功能（帆布）
{
的imageData = canvas.toDataURL（ 图像/ JPEG）;
doc.addImage（的imageData， 'JPEG'，0 ，0,200,200）;
doc.save（'test.pdf'）;

}
}）;


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

I am trying to convert an html into a pdf using jsPDF. However, the variable and things that happen inside a function seem to be invisible to everything outside of the function. Here is my code:

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

Upon running this, a blank page is rendered, notably that everything within the function html2canvas did not actually affect var doc. However, upon putting the doc.save('test.pdf'); bit inside the function (after doc.addImage()), it executes fine with the page being rendered. However, I cannot do this because I am going to use a for-each loop to execute the html2canvas function multiple times on multiple pages and then at the end, save the document. But this won't work because it seems that the doc.save() needs to be in the same function as the rest. How can I avoid this problem?

Thanks
Edit: Problem fixed using a counter and simple if statement.

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

    });

});
});

Thanks for the help, everybody

解决方案

You need to put your save after you've added the image:

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

        }
    });

The onrendered function is a callback and will be executed once the image is rendered. In your code the save is being called prior to the image being added.

这篇关于var不受函数的影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！