web-dev-qa-db-fra.com

comment utiliser html2canvas et jspdf pour exporter en pdf de manière simple et appropriée

Je travaille actuellement sur un logiciel de gestion d'école qui nécessite généralement l'exportation de contenu HTML contenant data tables et div tag. 

J'ai essayé tous les moyens possibles pour écrire un code qui permette d'exporter correctement mes données html, avec de préférence css. Après avoir vérifié quelques questions et réponses ici, j'ai essayé d'utiliser spdf, mais pas de chance. 

Il continue à détruire mon alignement de table, alors j'ai lu sur html2canvas mais l'implémenter avec jspdf était mon problème, je voudrais capturer le contenu si une balise div avec html2canvas puis envoyer le canevas à jspdf pour exporter le canevas au format pdf. 

Voici mon code ci-dessous:

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

voici le code js

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

Je t'ai préparé un violon.

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

Testé dans Chrome38, IE11 et Firefox 33. Semble avoir des problèmes avec Safari. Cependant, Andrew l'a fait fonctionner dans Safari 8 sur Mac OSx en passant de JPEG à JPEG. Pour plus de détails, voir son commentaire ci-dessous.

20
Razan Paul

Celui-ci montre comment imprimer uniquement l'élément sélectionné sur la page avec des ajustements dpi/resolution

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