Exportieren von Bildern in JsPDF von HTML

Ich habe eine Webseite, auf der ich etwas HTML drucken möchte. Dazu verwende ich html2canvas und jsPDF.Exportieren von Bildern in JsPDF von HTML

Das Problem, das ich erhalte, ist, dass es nicht die Bilder druckt, die im HTML gezeigt werden.

Mein HTML und CSS sieht wie folgt aus (complete code in fiddle):

.handsomeHtml { 
background: red; 
} 

.crazyFrog { 
background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'); 
width: 500px; 
height: 500px; 
} 

<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> 

<div id="someHtml" class="handsomeHtml"> 
    Hello, handsome HTML 
<br> 
<img class="crazyFrog"></img> 
</div> 

<button id="savePDFbutton" onclick="savePDF()"> 
    save pdf 
</button>

Erwartetes Ergebnis:

Actual PDF Ergebnis

Quelle

2017-07-18 methgaard

Überprüfen Sie diesen Arbeitscode.

Sie können Code auf fiddle auch überprüfen.

<!DOCTYPE html> 
 
    <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 testDivElement = document.getElementById('someHtml'); 
 

 
      function savePDF() { 
 
       var imgData; 
 
       html2canvas($("#someHtml"), { 
 
        useCORS: 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'); 
 
         window.open(imgData); 
 
        } 
 
       }); 
 
      } 
 

 

 
     </script> 
 
     <style> 
 
      .handsomeHtml { 
 
       background: red; 
 
      } 
 

 
      .crazyFrog { 
 
       background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'); 
 
       width: 500px; 
 
       height: 500px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div id="someHtml" class="handsomeHtml"> 
 
      Hello, handsome HTML 
 
     <br /> 
 
      <img class="crazyFrog"></img> 
 
     </div> 
 
     <br /> 
 
     <button id="savePDFbutton" onclick="savePDF()"> 
 
      save pdf 
 
     </button> 
 
    </body> 
 
    </html>

Quelle

2017-07-18 08:05:29

Es könnte sein, dass Die jsPDF-Bibliothek kann Bilder nicht "over the wire" auflösen. Haben Sie stattdessen versucht, sie als Base64-kodiertes Bild direkt in das CSS aufzunehmen?

Quelle

2017-07-18 07:47:06 Anders

Danke, das tatsächlich funktioniert, aber ich habe Angst, dass ich nicht alles zu Base64 konvertieren – methgaard

Exportieren von Bildern in JsPDF von HTML

Antwort

Verwandte Themen