web-dev-qa-db-fra.com

Comment convertir une page HTML en PDF puis téléchargez-le?

Voici ma page Web conçue avec HTML et CSS:

 

Comment puis-je télécharger la même page Web au format PDF? J'essayais beaucoup de solutions mais je ne reçois que du contenu sur un fichier PDF mais pas avec du style CSS.

Des solutions?

javascriptjquerycsshtml5pdf-generation
5
ajay

Comme expliqué dans cet article vous pouvez utiliser la bibliothèque jsPDF pour le faire.

Assurez-vous d'inclure dans votre fichier les balises jQuery et jsPDF .

Obtenez également html2canvasJS pour convertir les éléments du document en canevas afin de corriger le code CSS.

JS:

let doc = new jsPDF('p','pt','a4');

doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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.0.272/jspdf.debug.js"></script>

<div id="content">
  <h1 style="color:red">Hello World</h1>
  <p>this is a PDF</p>
</div>

Démo:JSFiddle

Vous pouvez également déclencher le téléchargement avec un bouton ( voir le post initial pour plus de détails )

15
Ivan

  1. Téléchargez la dernière version de jsPDF .

  2. Incluez les scripts suivants dans votre projet:

    • jspdf.js 
    • jspdf.plugin.from_html.js 
    • jspdf.plugin.split_text_to_size.js 
    • jspdf.plugin.standard_fonts_metrics.js 
1
Kirit