Conversion de HTML en PDF avec Puppeteer : configuration des styles et pagination

La conversion de HTML en PDF est essentielle pour créer des documents standardisés tels que des rapports, des factures et des documents clients. Marionnettiste, un outil d'automatisation de navigateur, vous aide à gérer les styles, les mises en page et les sauts de page pour des résultats PDF professionnels. Voici un aperçu rapide de ses possibilités. Marionnettiste:

Générer des PDF:Utilisez Puppeteer pour convertir du HTML en PDF soignés tout en exécutant JavaScript et en appliquant du CSS personnalisé.
Styles de contrôle: Définissez les tailles de page, les marges, les polices, les en-têtes, les pieds de page et bien plus encore à l'aide de CSS spécifiques à l'impression.
Gérer les sauts de page:Utilisez des règles CSS pour éviter de diviser les tableaux, les titres ou les images sur plusieurs pages.
Optimiser les performances: Améliorez la qualité et réduisez la taille des fichiers grâce à la mise à l'échelle, à l'optimisation des images et à une gestion efficace des ressources.

Quick Start:Installer Puppeteer avec npm install puppeteer, chargez votre code HTML (sous forme de chaîne, de fichier local ou d'URL) et configurez les paramètres PDF tels que les dimensions, les marges et le rendu en arrière-plan. @media print Règles CSS pour un meilleur contrôle des styles d'impression.

Fonctionnalités clés:

Personnalisation de la page avec @page règles.
Modèles d'en-tête/pied de page pour des mises en page professionnelles.
Gestion de contenu multipage pour éviter les divisions gênantes dans les tableaux ou le texte.

Avec Puppeteer, vous pouvez automatiser et personnaliser la génération de PDF pour des résultats cohérents et de haute qualité.

🌐 Convertissez HTML en PDF avec Marionnettiste in Node.js 🚀 Étape complète ...

Premiers pas avec Puppeteer

Apprenez à configurer et à utiliser Puppeteer pour générer des PDF. Suivez ces étapes pour commencer.

installation

Avant de commencer, assurez-vous que Node.js version 14.0.0 ou supérieure est installé sur votre système. Voici comment configurer tout cela :

Installez Node.js: Téléchargez-le depuis nodejs.org et terminer l'installation.
Créer un dossier de projet: Créez un nouveau dossier pour votre projet.
Initialiser le projet:Ouvrez un terminal dans votre dossier de projet et exécutez npm init -y.
Installez Puppeteer: Utilisez la commande npm install puppeteer pour ajouter Puppeteer à votre projet.

Premier script de génération PDF

Voici un script de base pour convertir du HTML en PDF à l'aide de Puppeteer :

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">generatePDF</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();

  <span class="hljs-comment">// Set page content</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setContent</span>(<span class="hljs-string">`
    <html>
      <body>
        <h1>Sample PDF Document</h1>
        <p>Generated with Puppeteer</p>
      </body>
    </html>
  `</span>);

  <span class="hljs-comment">// Generate PDF</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'output.pdf'</span>,
    <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>,
    <span class="hljs-attr">margin</span>: {
      <span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
    }
  });

  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}

<span class="hljs-title function_">generatePDF</span>();

Enregistrer ce script sous generate-pdf.js. Exécutez-le en tapant node generate-pdf.js dans votre terminal. Le script créera un PDF aux dimensions US Letter (8.5 × 11 pouces) avec des marges de 1 pouce.

Options de source HTML

Puppeteer propose plusieurs façons de charger du contenu HTML pour la génération de PDF :

Chargement direct du contenu: Utilisez une chaîne contenant le code HTML.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setContent</span>(htmlString);

Accès aux fichiers locaux: Chargez un fichier HTML depuis votre système local.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">`file:<span class="hljs-subst">${path.join(__dirname, <span class="hljs-string">'template.html'</span>)}</span>`</span>);

Chargement d'URL à distance: Récupérer le code HTML d'un site Web en direct.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://yourwebsite.com/page-to-convert'</span>);

Lorsque vous travaillez avec des ressources externes telles que des images ou des styles, assurez-vous qu'elles sont intégrées, qu'elles utilisent des URL absolues ou qu'elles sont stockées localement.

Conseils pour de meilleures performances

Pour garantir une génération fluide de PDF, gardez ces conseils à l'esprit :

Utilisez le page.waitForNetworkIdle() attendre que toutes les requêtes réseau soient terminées.
Définissez des délais d’expiration appropriés pour le chargement des ressources.
Gérez explicitement le chargement des polices pour éviter les problèmes de rendu.

Une fois votre HTML prêt, vous pouvez passer à la personnalisation des styles et des paramètres du PDF.

Paramètres de style PDF

Règles CSS spécifiques à l'impression

Pour adapter votre contenu à la sortie PDF, utilisez @media print règles. Voici un exemple :

<span class="hljs-keyword">@media</span> print {
  <span class="hljs-comment">/* Hide navigation menus and non-essential elements */</span>
  <span class="hljs-selector-tag">nav</span>, <span class="hljs-selector-tag">button</span>, <span class="hljs-selector-class">.no-print</span> {
    <span class="hljs-attribute">display</span>: none;
  }

  <span class="hljs-comment">/* Adjust text for better readability in PDFs */</span>
  <span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12pt</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;
  }

  <span class="hljs-comment">/* Ensure accurate background rendering */</span>
  * {
    -webkit-<span class="hljs-attribute">print-color-adjust</span>: exact;
  }
}

Si vous souhaitez conserver vos styles basés sur l'écran au lieu d'appliquer des styles spécifiques à l'impression, incluez cette ligne avant de générer le PDF :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateMediaType</span>(<span class="hljs-string">'screen'</span>);

Une fois les styles d’impression appliqués, vous pouvez passer aux ajustements de mise en page.

Paramètres de mise en page

Définir les dimensions du PDF à l'aide des options Puppeteer ou CSS @page Règles. Pour Puppeteer, vous pouvez utiliser la configuration suivante :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>,
  <span class="hljs-attr">margin</span>: {
    <span class="hljs-attr">top</span>: <span class="hljs-string">'0.75in'</span>,
    <span class="hljs-attr">right</span>: <span class="hljs-string">'0.5in'</span>,
    <span class="hljs-attr">bottom</span>: <span class="hljs-string">'0.75in'</span>,
    <span class="hljs-attr">left</span>: <span class="hljs-string">'0.5in'</span>
  },
  <span class="hljs-attr">landscape</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>
});

Pour des tailles de page plus personnalisées, utilisez CSS @page règles:

<span class="hljs-keyword">@page</span> {
  size: <span class="hljs-number">8.5in</span> <span class="hljs-number">11in</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0.75in</span> <span class="hljs-number">0.5in</span>;
}

Après avoir configuré la mise en page, vous pouvez affiner les éléments de conception pour un look soigné.

Éléments de texte et de conception

Pour rendre le contenu visuellement clair et professionnel, utilisez ces règles CSS :

<span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Arial'</span>, sans-serif;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#333333</span>;
}

<span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span> {
  <span class="hljs-attribute">page-break-after</span>: avoid;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
}

<span class="hljs-selector-tag">table</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">border-collapse</span>: collapse;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-selector-tag">img</span> {
  <span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">height</span>: auto;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

Pour des couleurs d'arrière-plan cohérentes, en particulier dans les sections critiques, ajoutez cette règle :

<span class="hljs-selector-class">.color-critical</span> {
  -webkit-<span class="hljs-attribute">print-color-adjust</span>: exact;
}

Ces ajustements garantissent que votre PDF est facile à lire et visuellement attrayant.

sbb-itb-23997f1

Contrôle des sauts de page

Propriétés CSS des sauts de page

Gérer efficacement les sauts de page garantit une fluidité de votre contenu sur plusieurs pages. Utilisez ces propriétés CSS pour contrôler les divisions de contenu :

<span class="hljs-comment">/* Start new page before chapters */</span>
<span class="hljs-selector-class">.chapter</span> {
  <span class="hljs-attribute">page-break-before</span>: always;
}

<span class="hljs-comment">/* Keep headings together with their content */</span>
<span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span> {
  <span class="hljs-attribute">page-break-after</span>: avoid;
}

<span class="hljs-comment">/* Avoid splitting tables or figures */</span>
<span class="hljs-selector-tag">table</span>, <span class="hljs-selector-tag">figure</span> {
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

Ces règles vous aident à organiser votre document et à le rendre facile à lire. Une fois les sauts de page définis, concentrez-vous sur la configuration des en-têtes et des pieds de page pour qu'ils soient alignés avec ces paramètres.

Configuration de l'en-tête et du pied de page

Configurez des en-têtes et des pieds de page dans Puppeteer pour donner à votre PDF un aspect professionnel :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">`
    <div style="font-size: 10px; padding: 0 0.5in; width: 100%;">
      <span class="title"></span>
      <span class="date" style="float: right;"></span>
    </div>
  `</span>,
  <span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">`
    <div style="font-size: 10px; text-align: center; width: 100%;">
      Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    </div>
  `</span>,
  <span class="hljs-attr">margin</span>: {
    <span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
    <span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>
  }
});

Assurez-vous d'ajuster les marges afin que l'en-tête et le pied de page s'adaptent correctement sans chevaucher votre contenu.

Gestion de contenu multipage

Une fois les sauts de page et les en-têtes/pieds de page en place, concentrez-vous sur la gestion du contenu sur plusieurs pages. Une mise en page soignée garantit la clarté et le professionnalisme de votre document :

<span class="hljs-comment">/* Keep captions with their images */</span>
<span class="hljs-selector-tag">figure</span> {
  <span class="hljs-attribute">display</span>: table;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-selector-tag">figcaption</span> {
  <span class="hljs-attribute">display</span>: table-caption;
  <span class="hljs-attribute">caption-side</span>: bottom;
}

<span class="hljs-comment">/* Avoid splitting list items or table rows */</span>
<span class="hljs-selector-tag">li</span>, <span class="hljs-selector-class">.table-row</span> {
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-comment">/* Allow large tables to break across pages */</span>
<span class="hljs-selector-class">.table-wrapper</span> {
  <span class="hljs-attribute">page-break-inside</span>: auto;
}

Pour les tableaux volumineux s'étendant sur plusieurs pages, placez-les dans un conteneur autorisant les sauts de page tout en conservant les lignes intactes. Cela garantit une lecture aisée des données, même dans les ensembles de données volumineux.

Astuce: Activez la printBackground option dans Puppeteer pour rendre tous les éléments visuels, y compris les couleurs d'arrière-plan et les images :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>
});

Qualité et performances PDF

Améliorer la qualité et les performances d'un PDF nécessite de prêter attention à la mise à l'échelle, au traitement des images et à la gestion des ressources. Ces étapes garantissent un document final impeccable et performant.

Méthodes de mise à l'échelle du contenu

Une mise à l'échelle correcte du contenu garantit sa lisibilité et sa cohérence. Puppeteer propose des contrôles de mise à l'échelle détaillés pour le rendu des PDF :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">scale</span>: <span class="hljs-number">0.8</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>
});

Ici, les valeurs inférieures à 1 réduisent le contenu, tandis que les valeurs supérieures à 1 l'agrandissent. Associer la mise à l'échelle à preferCSSPageSize garantit que le PDF adhère aux dimensions définies par CSS :

<span class="hljs-keyword">@page</span> {
  size: <span class="hljs-number">8.5in</span> <span class="hljs-number">11in</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0.5in</span>;
}

Gestion de la qualité des images

Choisir le bon format d'image est crucial. Le format PNG est idéal pour les visuels détaillés comme les graphiques et les logos, mais peut augmenter la taille du fichier. Le format JPEG est plus adapté aux photos, tandis que WebP est souvent converti, ce qui peut augmenter encore la taille du fichier.

Pour améliorer la clarté de l'image, augmentez le facteur d'échelle de l'appareil :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1200</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">800</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});

Problèmes courants et solutions

Relever des défis courants tels que la gestion des ressources, la taille des fichiers et les erreurs peut considérablement améliorer les performances.

Gestion des ressources
Utilisez une seule instance de navigateur et une seule page pour gérer plusieurs demandes PDF, réduisant ainsi les frais généraux :

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});

<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> request <span class="hljs-keyword">of</span> requests) {
  <span class="hljs-keyword">await</span> <span class="hljs-title function_">generatePDF</span>(page, request);
}

Optimisation de la taille des fichiers
Réduisez la taille du fichier en supprimant les éléments inutiles et en optimisant les images :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.no-print'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> el.<span class="hljs-title function_">remove</span>());

  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'img'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">img</span> =></span> {
    img.<span class="hljs-property">loading</span> = <span class="hljs-string">'lazy'</span>;
    img.<span class="hljs-property">decoding</span> = <span class="hljs-string">'async'</span>;
  });
});

Gestion des erreurs
Mettre en œuvre des stratégies pour gérer les erreurs telles que les délais d'attente et les nouvelles tentatives :

<span class="hljs-keyword">const</span> <span class="hljs-title function_">generatePDF</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">page, options</span>) => {
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(options.<span class="hljs-property">url</span>, {
      <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
      <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
    });
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>(options);
  } <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'PDF generation failed:'</span>, error);
    <span class="hljs-keyword">throw</span> error;
  }
};

Conclusion

L'utilisation de Puppeteer pour convertir du HTML en PDF fournit des outils efficaces pour créer des documents de qualité professionnelle.

Étapes clés à suivre

Appliquer les paramètres du support d'impression avec page.emulateMediaType('print').
Utilisez des règles CSS comme page-break-inside: avoid pour garantir que les éléments tels que les lignes du tableau restent intacts.

Ces techniques s’appuient sur des méthodes de style et de mise en page antérieures, servant de base solide pour une automatisation plus avancée.

Options d'automatisation avancées

Vous pouvez aller plus loin dans la génération de PDF grâce à ces fonctionnalités d'automatisation supplémentaires :

Configuration de l'environnement
Configurez les répertoires de cache et les paramètres du navigateur pour garantir des résultats cohérents sur différentes plates-formes.
Tweaks performance
Ajustez les paramètres de délai d’expiration et ajoutez des mécanismes de nouvelle tentative pour améliorer la fiabilité pendant le processus de génération.

Lors du déploiement de ces méthodes en production, incluez la gestion des erreurs et la journalisation pour maintenir des sorties PDF cohérentes et fiables.

Conversion de HTML en PDF avec Puppeteer : configuration du style et pagination