Convertir HTML en PDF en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Convertir HTML en PDF en JavaScript
Kushank Singh 12 octobre 2023
JavaScript JavaScript PDF
  1. Utilisez la bibliothèque jsPDF pour convertir HTML en PDF
  2. Utiliser un objet fenêtre pour convertir HTML en PDF
Convertir HTML en PDF en JavaScript

Lors du téléchargement de données massives à partir d’une application Web, le format de fichier PDF est pratique. Il permet aux utilisateurs de télécharger du matériel dynamique sous forme de fichier pour une consommation hors ligne. Le matériel HTML est transformé en document PDF et téléchargé sous forme de fichier PDF à l’aide de la fonction d’exportation au format PDF. Un script côté serveur convertit le HTML en PDF dans l’application Web dynamique.

Dans ce tutoriel, nous allons effectuer une telle conversion en utilisant JavaScript.

Utilisez la bibliothèque jsPDF pour convertir HTML en PDF

Dans cette méthode, nous utiliserons la bibliothèque jsPDF pour convertir le HTML en PDF. C’est l’une des meilleures bibliothèques à utiliser. La bibliothèque jsPDF propose plusieurs techniques et options pour personnaliser la génération de PDF.

Vérifiez le code ci-dessous.

  • HTML
<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>Convert this text to PDF.</p>
    </div>
    <div id="hidden-element">This will not be printed</div>
  </body>
</html>
  • JavaScript
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
  '#hidden-element': function(element, renderer) {
    return true;
  }
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
    elementHTML, 15, 15,
    {'width': 170, 'elementHandlers': specialElementHandlers});

La propriété orientation définit l’orientation du papier. Les options setFont() et setFontType() sont utilisées pour définir la police et le style de police du texte. Les fonctions setFontSize() et setTextColor() sont utilisées pour définir la taille de la police et la couleur du texte.

Utiliser un objet fenêtre pour convertir HTML en PDF

Dans cette méthode, nous allons créer un objet fenêtre, que nous utiliserons pour créer un document associé et écrire le texte HTML dans le fichier pour l’exporter au format PDF.

Voir le code ci-dessous

<html>
<head>
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  
  <script type="text/javascript">
    $("#btnPrint").live("click", function () {
      var divContents = $("#text").html();
      var printWindow = window.open('', '', 'height=400,width=800');
      printWindow.document.write('<html><head><title>Html to PDF</title>');
      printWindow.document.write('</head><body >');
      printWindow.document.write(text);
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    });
  </script>
  </head>
  <body>
    <form id="form1">
    <div id="text">
      Convert this text to PDF.
    </div>
      <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
  </body>
</html>

Dans l’exemple ci-dessus, la fonction window.open() ouvrira un document avec les dimensions spécifiées, et la méthode document.write() est utilisée pour écrire du texte dans le document ouvert.