轉換HTML字符串PDF使用jsPDF

我有一個名爲 var = pictureModelHtml;轉換HTML字符串PDF使用jsPDF

一個變量我有一個for循環，創建畫布，並繪製每個畫布上的圖片。

for (i = 0; i < 10; i++) { 
    pictureModelHtml += '<div class="canvas" id="'+id+'"></div>; 
    pictureModelHtml += '<canvas id="'+uniqueId+'">picutre</canvas>'; 
} 

$('.canvas').each(function(i) { 
    //do something that draws a picture on a canvas corresponds to the canvas id. 
}

我堅持將所有圖片繪製爲PDF。我正在使用jsPDF庫來生成PDF。我有：

var pdf = new jsPDF(); 
pdf.fromHTML(pictureModelHtml); 
pdf.save("myfile.pdf");

pdf文件不顯示任何picutre。它是空的。我錯過了什麼？？任何人有一個想法如何做到這一點？請幫忙！！

來源

2017-07-20 potbelly

任何錯誤控制檯（F12）？說，安全錯誤？如果沒有，那麼jsPDF可能不支持畫布內容。我不知道爲什麼你不插入圖像本身，而不是通過畫布？即。 'pictureModelHtml + ='';'（圖片通常被緩存，因此重用網址不應該提供任何明顯的延遲）。 – K3N

我認爲這段代碼對你有幫助。您可以檢查工作小提琴here

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> 
    <script type="text/javascript"> 
     var pictureModelHtml = ''; 
     $().ready(function() { 
      var imgData; 
      html2canvas($("#scream"), { 
       useCORS: true, 
       logging: true, 
       onrendered: function (canvas) { 
        imgData = canvas.toDataURL('image/png'); 
        imgData.crossOrigin = "Anonymous"; 
        var doc = new jsPDF('p', 'pt', 'a4'); 
        doc.addImage(imgData, 'PNG', 10, 10); 
        $('#scream1').attr('src', imgData); 

        for (i = 0; i < 10; i++) { 
         pictureModelHtml += '<canvas id="canvas-' + i + '">picutre</canvas>'; 
         $('#someHtml').html(pictureModelHtml); 
        } 

        setTimeout(function() { 
         $('canvas').each(function (i, canvas) { 
          var c = $(canvas)[0]; 
          var ctx = c.getContext("2d"); 
          var img = document.getElementById("scream1"); 
          ctx.drawImage(img, 10, 10); 
         }); 
        }, 1000); 
       } 
      }); 



     }); 

     var testDivElement = document.getElementById('someHtml'); 

     function savePDF(canvas) { 
      var imgData; 
      html2canvas($("#someHtml"), { 
       useCORS: true, 
       logging: true, 
       onrendered: function (canvas) { 
        imgData = canvas.toDataURL('image/png'); 
        var doc = new jsPDF('p', 'pt', 'a4'); 
        doc.addImage(imgData, 'PNG', 10, 10); 
        //doc.save('sample-file.pdf'); 
        setTimeout(function() { window.open(imgData) }, 1000); 
       } 
      }); 
     } 


    </script> 
</head> 
<body> 
    <img id="scream" width="220" height="277" src="http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg" /> 
    <img id="scream1" style="display:none;" /> 
    <div id="someHtml"></div> 
    <br /> 
    <button id="savePDFbutton" onclick="savePDF()"> 
     save pdf 
    </button> 
</body> 
</html>

來源

2017-07-20 03:50:24

轉換HTML字符串PDF使用jsPDF

回答

相關問題