Pourquoi vos PDF générés depuis des pages JavaScript sont vides — et comment régler le pro
Si vous avez déjà tenté de convertir une page React ou Vue en PDF pour vous retrouver avec une feuille blanche, le problème ne vient pas de votre outil, mais du moment où vous l’utilisez. La plupart des bibliothèques récupèrent le HTML avant que JavaScript n’ait rendu le contenu, ne laissant qu’une coquille vide. La solution ? Utiliser un moteur de navigateur réel qui attend que tout soit chargé.
Le vrai responsable : outils statiques vs pages dynamiques
Les outils classiques comme wkhtmltopdf s’appuient sur une ancienne version de WebKit, avec un support quasi nul pour JavaScript. Ils fonctionnent parfaitement pour les pages rendues côté serveur, mais les frameworks clients (React, Vue…) construisent le DOM après l’arrivée du balisage initial. Récupérer le HTML brut avec axios ou fetch donne le même résultat vide, car aucun ne exécute JavaScript. Seule une navigation sans tête qui restitue la page exactement comme l’utilisateur la voit peut produire un PDF fidèle.
Puppeteer à la rescousse
Puppeteer pilote une instance réelle de Chromium, exécute tous les scripts, attend que le réseau soit inactif, puis imprime la page. Un script minimal définit deux options essentielles : waitUntil: 'networkidle0' indique à Puppeteer d’attendre que le réseau soit inactif pendant 500 ms, garantissant que les données et le DOM sont prêts. L’option printBackground: true préserve les arrière-plans et couleurs que le moteur d’impression de Chrome supprime par défaut.
const puppeteer = require('puppeteer');
async function pageToPdf(url, outPath) { const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }); const page = await browser.newPage(); await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 }); await page.pdf({ path: outPath, format: 'A4', printBackground: true, margin: { top: '20px', bottom: '20px', left: '16px', right: '16px' } }); await browser.close(); }
Cas particuliers qui ruinent encore le PDF
Les images et sections chargées à la demande n’apparaissent qu’au défilement. Par défaut, Puppeteer ne déclenche pas d’événements de défilement : il faut donc faire défiler automatiquement jusqu’en bas avant l’impression. Les polices web peuvent aussi provoquer un rendu de secours ; attendez explicitement document.fonts.ready. Enfin, les feuilles de style spécifiques à l’impression peuvent écraser votre mise en page — un test et des ajustements sont souvent nécessaires.
Pour une solution rapide en ligne sans code, vous pouvez essayer site2pdf.online comme solution de repli légère, bien que l’automatisation à grande échelle nécessite toujours Puppeteer.
Pourquoi c’est important
Les impressions manuelles ou les outils statiques échouent avec les SPAs modernes, car ils capturent le squelette avant que JavaScript ne l’anime. Utiliser une navigation sans tête qui attend l’état réel de la page garantit que les PDF correspondent à ce que voient les utilisateurs — un impératif pour les rapports, l’archivage ou les documents réglementaires. Le léger effort de scripting avec Puppeteer se rentabilise rapidement en termes de précision et d’automatisation sur des milliers de pages.
Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.