comment utiliser html2canvas et jspdf pour exporter en pdf de manière simple et correcte
je travaille actuellement sur un logiciel de gestion d'école qui nécessite habituellement l'exportation de contenu html qui contient data tables et div tag.
j'ai essayé tous les moyens possibles pour écrire un code qui sera capable d'exporter mes données html d'une bonne manière, avec CSS de préférence. Après avoir vérifié quelques questions et réponses ici, j'ai essayé d'utiliser spdf, mais pas de chance.
Il garde détruire mon alignement du tableau, puis j'ai lu sur html2canvas mais de l'implémenter avec jspdf a mon problème, je voudrais saisir le contenu si une balise div html2canvas alors envoyez la toile à jspdf exporter la toile 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');
});
2 réponses
j'ai fait un jsfiddle pour vous.
<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é en Chrome38, IE11 et Firefox 33. Il semble avoir des problèmes avec le Safari. Cependant, Andrew L'a obtenu travaillant dans Safari 8 sur Mac OSx en passant à JPEG de la PNG. Pour plus de détails, voir son commentaire ci-dessous.
celui-ci montre comment imprimer seulement l'élément sélectionné sur la page avec dpi/resolution réglages
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');
}
});
});