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

Sollea AI lead developer Mohamed Amine Ben Mallessa built a system using Playwright (Chromium headless) and versioned HTML templates to generate vector PDF and 300 dpi PNG posters server-side in about 3.5 seconds. The solution injects data via JavaScript and exports to A4 PDF and 2480×3508px PNG, replacing unreliable tools like wkhtmltopdf and heavy setups like Puppeteer. The client saves thousands of euros annually and gains autonomy.

📖 Article original : GitHub Gist Par Mohamed Amine Ben Mallessa — Lead Dev Sollea AI 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é. Formulaire → Template HTML + postMessage → Playwright headless → PDF A4 vectoriel + PNG 300 dpi 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. | Solution | Fiabilité | Vectoriel | Taille | Facilité | |---|---|---|---|---| | wkhtmltopdf | ⚠️ CSS capricieux | ✅ | ❌ 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 . 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. 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 https://sollea-ai.com · GitHub https://github.com/mohamed-amine-ben-mallessa · LinkedIn https://fr.linkedin.com/in/benmallessa Sollea AI — Développement full-stack, automatisation IA, solutions sur mesure. 🔗 Sollea AI · Équipe dirigée par Mohamed Amine Ben Mallessa — Lead Dev Sollea AI