JSPDF第一次下载空白pdf文件，但下一步它下载正确

Question

我想出口svg图使用JSPF库pdf。 问题是当用户点击第一次下载时，它给出空白pdf文件 但第二次它会生成正确的文件。 下面是我的代码，请帮助我从过去两天尝试。

var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var svg = document.querySelector('svg'); 
    var serializer = new XMLSerializer(); 
    var svgString = serializer.serializeToString(svg); 

    canvg(canvas, svgString); 
    var imgData = canvas.toDataURL('image/jpeg'); 
    var pdf = new jsPDF('p', 'pt', 'ledger'); 
    pdf.setFontSize(10); 
    pdf.text(35, 25, "Google Cloud Craft"); 

    pdf.addImage(imgData, 'JPEG', 50, 40); 
    pdf.save(projectIdName + '.pdf'); 

Answer 1

最后，我能够解决它，忘了一件基本的东西，来处理canvg函数的回调函数。

canvg(canvas, svgString,{ 
     renderCallback: function(){ 
      var imgData = canvas.toDataURL('image/jpeg'); 
      var pdf = new jsPDF('p', 'pt', 'ledger'); 
      pdf.setFontSize(10); 
      pdf.text(35, 25, "CLouditect"); 

      pdf.addImage(imgData, 'JPEG', 50, 40); 
      pdf.save(projectIdName + '.pdf'); 
      $('#background-svg').remove(); 
     } 
    }); 

的问题是canvg无法创建完整的画布，所以有一个名为renderCallback一个回调函数画布渲染完成后调用。之后您可以正确保存。

另请参阅其他选项https://github.com/gabelerner/canvg