DEV Community

Mohamed Amine Ben Mallessa
Mohamed Amine Ben Mallessa

Posted on

PDF vectoriel et PNG 300 dpi générés en 3 secondes avec Playwright — Guide complet

#python #webdev #opensource #tutorial

📖 Article original : GitHub Gist

Par Mohamed Amine Ben Mallessa — Lead Dev Sollea AI

Le défi

Nous devions générer des affiches personnalisées au format PDF vectoriel et PNG haute résolution, à la volée, côté serveur. Pas de client lourd, pas de navigateur, pas de SaaS externe.

La solution ? Playwright (Chromium headless) + un template HTML versionné.

Comment ça marche 

Formulaire → Template HTML + postMessage → Playwright headless → PDF A4 vectoriel + PNG 300 dpi
Enter fullscreen mode Exit fullscreen mode

Le template : un fichier HTML autonome avec son CSS inline et son SVG. Pas de dépendance externe, pas de polices à charger, pas de requêtes réseau.

Le rendu : Playwright ouvre le template, injecte les données via JavaScript, exporte en PDF (1 page, vectoriel, A4) et en PNG (300 dpi, 2480×3508px).

Le temps : ~3,5 secondes par document. Reproductible à l'identique.

Pourquoi c'est mieux que wkhtmltopdf ou Puppeteer

Solution Fiabilité Vectoriel Taille Facilité
wkhtmltopdf ⚠️ CSS capricieux ✅ PDF ✅ ❌ Obsolète
Puppeteer ✅ ✅ ✅ ⚠️ Lourd
Playwright ✅✅ ✅✅ ✅✅ ✅✅

Playwright gère nativement les polices, le viewport, le mode headless, et s'intègre parfaitement avec FastAPI via un simple subprocess.

L'astuce

Un seul template HTML = aperçu live dans le navigateur + rendu final PDF/PNG. Pas de code en double, pas de divergence preview/production.

postMessage({ type: "setState", state: formData }) → le template se met à jour. Que ce soit dans l'iframe du frontend ou dans Chromium headless.

Ce qu'on a gagné

  • 0 abonnement (ni Canva, ni Adobe)
  • 3,5s de temps de génération
  • PDF vectoriel parfait (pas de pixelisation)
  • PNG prêt à imprimer
  • Templates versionnés dans Git
  • Ajout d'un nouveau format = 1 dossier

Le client économise des milliers d'euros par an et gagne en autonomie.

Article initialement publié sur GitHub Gist.

Mohamed Amine Ben Mallessa — Lead Dev chez Sollea AI
🔗 Sollea AI · GitHub · LinkedIn

playwright #fastapi #pdfgeneration #htmltemplates #opensource #python #webdev

💻 Vous avez un projet similaire ?

Sollea AI — Développement full-stack, automatisation IA, solutions sur mesure.

🔗 Sollea AI · GitHub · LinkedIn

Équipe dirigée par **Mohamed Amine Ben Mallessa* — Lead Dev Sollea AI*

Top comments (0)