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

> Source: <https://dev.to/benmallessamohamedamine/pdf-vectoriel-et-png-300-dpi-generes-en-3-secondes-avec-playwright-guide-complet-3dm2>
> Published: 2026-07-04 01:13:16+00:00

*📖 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*