it-swarm.com.de

wie man html2canvas und jspdf verwendet, um auf eine korrekte und einfache Weise nach pdf zu exportieren

Ich arbeite derzeit an einer Schulverwaltungssoftware, die normalerweise den Export von HTML-Inhalten erfordert, die data tables und div tag enthalten. 

Ich habe alle möglichen Mittel ausprobiert, um einen Code zu schreiben, der in der Lage ist, meine HTML-Daten auf eine gute Art und Weise zu exportieren, vorzugsweise mit css. Nachdem ich hier einige Fragen und Antworten geprüft hatte, versuchte ich es mit spdf, aber kein Glück. 

Es zerstört immer wieder meine Tabellenausrichtung, dann las ich über html2canvas, aber um es mit jspdf zu implementieren, war mein Problem. Ich möchte den Inhalt erfassen, wenn ein div-Tag mit html2canvas dann die Leinwand an jspdf sendet, um die Leinwand als pdf zu exportieren. 

Hier ist mein Code:

<script src="assets/js/pdfconvert/jspdf.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js">  </script>
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script>
<script src="assets/js/pdfconvert/filesaver.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script>
<script src="assets/js/pdfconvert/html2canvas.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script>

hier ist der js-code

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});
13
Tobi Owolawi

Ich habe für Sie ein Jazfiddle gemacht.

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>

'

        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/

In Chrome38, IE11 und Firefox 33 getestet. Scheint Probleme mit Safari zu haben. Andrew hat es jedoch in Safari 8 unter Mac OSx zum Laufen gebracht, indem Sie von PNG zu JPEG gewechselt haben. Einzelheiten finden Sie in seinem Kommentar unten.

20
Razan Paul

Hier wird gezeigt, wie nur das ausgewählte Element auf der Seite mit dpi/resolution-Anpassungen gedruckt wird

HTML:

<html>

  <body>
    <header>This is the header</header>
    <div id="content">
      This is the element you only want to capture
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>
  </body>

</html>

CSS:

body {
  background: beige;
}

header {
  background: red;
}

footer {
  background: blue;
}

#content {
  background: yellow;
  width: 70%;
  height: 100px;
  margin: 50px auto;
  border: 1px solid orange;
  padding: 20px;
}

JS: 

$('#print').click(function() {

  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {
    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.save('sample-file.pdf');
    }
  });
});

jsfiddle: https://jsfiddle.net/marksalvania/dum8bfco/

1
Mark Salvania