{"slug": "pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet", "title": "PDF vectoriel et PNG 300 dpi générés en 3 secondes avec Playwright — Guide complet", "summary": "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.", "body_md": "*📖 Article original : GitHub Gist*\n\n**Par Mohamed Amine Ben Mallessa — Lead Dev Sollea AI**\n\nNous 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.\n\nLa solution ? Playwright (Chromium headless) + un template HTML versionné.\n\n```\nFormulaire → Template HTML + postMessage → Playwright headless → PDF A4 vectoriel + PNG 300 dpi\n```\n\n**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.\n\n**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).\n\n**Le temps** : ~3,5 secondes par document. Reproductible à l'identique.\n\n| Solution | Fiabilité | Vectoriel | Taille | Facilité |\n|---|---|---|---|---|\n| wkhtmltopdf | ⚠️ CSS capricieux | ✅ | ❌ Obsolète | |\n| Puppeteer | ✅ | ✅ | ✅ | ⚠️ Lourd |\nPlaywright |\n✅✅ | ✅✅ | ✅✅ | ✅✅ |\n\nPlaywright gère nativement les polices, le viewport, le mode headless, et s'intègre parfaitement avec FastAPI via un simple `subprocess`\n\n.\n\nUn seul template HTML = aperçu live dans le navigateur + rendu final PDF/PNG. Pas de code en double, pas de divergence preview/production.\n\n`postMessage({ type: \"setState\", state: formData })`\n\n→ le template se met à jour. Que ce soit dans l'iframe du frontend ou dans Chromium headless.\n\n**Le client économise des milliers d'euros par an et gagne en autonomie.**\n\n*Article initialement publié sur GitHub Gist.*\n\n**Mohamed Amine Ben Mallessa** — Lead Dev chez Sollea AI\n\n🔗 [Sollea AI](https://sollea-ai.com) · [GitHub](https://github.com/mohamed-amine-ben-mallessa) · [LinkedIn](https://fr.linkedin.com/in/benmallessa)\n\n**Sollea AI** — Développement full-stack, automatisation IA, solutions sur mesure.\n\n🔗 ** Sollea AI** ·\n\n*Équipe dirigée par **Mohamed Amine Ben Mallessa** — Lead Dev Sollea AI*", "url": "https://wpnews.pro/news/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet", "canonical_source": "https://dev.to/benmallessamohamedamine/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet-3dm2", "published_at": "2026-07-04 01:13:16+00:00", "updated_at": "2026-07-04 01:48:52.950915+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["Mohamed Amine Ben Mallessa", "Sollea AI", "Playwright", "Chromium", "FastAPI", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet", "markdown": "https://wpnews.pro/news/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet.md", "text": "https://wpnews.pro/news/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet.txt", "jsonld": "https://wpnews.pro/news/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet.jsonld"}}