var不受function影响吗？

我正在尝试使用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函数是一个回调函数，将在渲染图像后执行。 在您的代码中，在添加图像之前调用保存。

Answer 2

然后你可以保存在onrendered

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