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