Comment transformer le HTML de ChatGPT canvas en PDF propre

Mis à jour: 2026-10-14 · Équipe Dawwerni

Copiez le HTML du canvas de ChatGPT dans un fichier page.html et ouvrez-le dans votre navigateur. Exportez ensuite avec un convertisseur qui attend le CDN Tailwind et les graphiques, fige les animations, garde les fonds sombres et cale les sections plein écran, ou imprimez avec Ctrl+P après avoir ajouté un court bloc @media print. Choisissez « Imprimer » pour un texte sélectionnable.

Étape 1 : récupérer le HTML depuis ChatGPT canvas

Le canvas de ChatGPT peut écrire une page web complète : un rapport, un tableau de bord, un CV ou une landing page. Pour obtenir un PDF, il vous faut ce code sous forme de vrai fichier .html sur votre ordinateur. Il en va de même pour les pages créées dans le Canvas de Gemini ou sous forme d’artefact HTML dans Claude.

1. Dans le canvas, utilisez l’option de copie du code, ou l’option de téléchargement si elle est proposée.
2. Si vous avez copié le code, collez-le dans un éditeur de texte brut (Bloc-notes sous Windows ; TextEdit sur Mac après Format → Convertir au format texte) et enregistrez-le sous page.html en UTF-8.
3. Double-cliquez sur page.html. Il doit s’ouvrir dans votre navigateur et ressembler à l’aperçu du canvas.
4. Si le code est un composant React et non une page, demandez : « Donne-moi ceci en un seul fichier HTML autonome que je peux ouvrir dans un navigateur. »

Pourquoi le PDF ne ressemble pas à l’aperçu

Les pages générées par une IA sont pensées pour l’écran. Elles chargent styles et bibliothèques depuis des CDN au moment de l’affichage, font apparaître des éléments en animation et dimensionnent les sections selon la fenêtre. Un PDF est un instantané fixe découpé en pages, d’où cinq problèmes qui reviennent sans cesse. Notre convertisseur gratuit pour le HTML généré par IA corrige chacun d’eux, et vous pouvez aussi les corriger dans le code.

Le CDN Tailwind n’a pas fini de styler la page

Beaucoup de pages d’IA utilisent le script Tailwind Play CDN, qui génère le CSS dans le navigateur après le chargement de la page. Capturez trop tôt et vous obtenez du texte sans style. La solution : attendre quelques secondes avant de capturer ou d’imprimer.

Les graphiques sont capturés en pleine animation

Chart.js et les bibliothèques similaires animent barres et courbes à partir de zéro. Une capture prise pendant cette demi-seconde montre des graphiques vides ou à moitié dessinés. Attendez plus longtemps, ou désactivez les animations (code ci-dessous).

Le thème sombre devient blanc

Les navigateurs suppriment les couleurs de fond à l’impression si « Graphiques d’arrière-plan » n’est pas coché : un tableau de bord sombre devient du texte gris clair sur fond blanc. print-color-adjust: exact ou l’option d’arrière-plan le conserve.

La section d’accueil en 100vh occupe une page entière

Les sections dimensionnées en 100vh (h-screen avec Tailwind) dépendent de la hauteur de la fenêtre. Sur papier, elles peuvent remplir une page presque vide ou être coupées. Calez-les sur la hauteur de page ou passez-les en hauteur automatique à l’impression.

Les en-têtes fixes se répètent et le contenu révélé au défilement reste invisible

Une barre de navigation en position: fixed peut s’imprimer sur chaque page dans Chrome, par-dessus le texte. Le contenu qui apparaît au défilement reste invisible puisque personne n’a fait défiler la page. Affichez les en-têtes une seule fois et forcez l’affichage du contenu masqué.

Vérifier les images, polices et données dont la page a besoin

Une page générée par une IA dépend souvent de fichiers qui ne sont pas à l’intérieur. Avant l’export, ouvrez-la dans votre navigateur et repérez les icônes d’images cassées, les polices de remplacement ou les panneaux vides. Chacun a une cause différente.

• Images désignées par un nom de fichier absent de votre ordinateur (par exemple logo.png) : l’IA a inventé un chemin. Remplacez-le par une vraie image, ou placez vos images à côté de page.html dans un .zip en gardant les chemins relatifs.
• Images liées depuis d’autres sites : elles s’affichent à l’ouverture de la page et à l’impression, mais les serveurs qui n’envoient pas d’en-têtes CORS les bloquent dans les exports par capture comme Télécharger le PDF, PPTX et PNG.
• Google Fonts et bibliothèques sur CDN : votre navigateur les télécharge à l’ouverture de la page, il faut donc une connexion internet pendant la conversion.
• Données chargées par fetch() depuis une API : si l’API refuse les requêtes venant d’un fichier local, le panneau reste vide. Demandez à l’IA d’intégrer des données d’exemple directement dans la page.

Réglages recommandés selon le type de page

Ces points de départ conviennent à la plupart des pages générées par une IA. S’il manque encore quelque chose, augmentez d’abord le temps d’attente.

Étape 2 : convertir dans votre navigateur

Le convertisseur HTML d’IA gratuit fonctionne entièrement dans votre navigateur : le fichier est ouvert dans un cadre isolé (sandbox) et n’est jamais envoyé, sans inscription ni filigrane. Il exporte en PDF, PowerPoint, PNG/JPG, Word et Markdown depuis le même écran.

1. Déposez page.html, collez le code, ou déposez un .zip si la page utilise des images ou des polices locales.
2. Choisissez le format et l’orientation d’après le tableau ci-dessus.
3. Réglez « attendre N secondes » sur 3 ou plus pour les pages utilisant le CDN Tailwind ou Chart.js.
4. Laissez les correctifs activés : animations figées dans leur état final, contenu révélé au défilement affiché, en-têtes fixes affichés une seule fois, sections 100vh calées sur la hauteur de page, fonds sombres conservés.
5. Cliquez sur « Imprimer / Enregistrer en PDF » pour du vrai texte, ou sur « Télécharger le PDF » pour une copie fidèle au pixel où le texte est une image.

Étape 3 (facultative) : demander à l’IA d’ajouter du CSS d’impression

Si vous imprimerez la page plusieurs fois, corrigez-la à la source. Collez cette demande dans la même conversation ChatGPT (en anglais ou traduite ; cela fonctionne de la même façon avec d’autres assistants) :

Add print styles to this page so it exports cleanly to PDF.
Do not change how it looks on screen.
- an @page rule: A4 portrait, 12 mm margins
- inside @media print:
  - keep background colours (print-color-adjust: exact)
  - hide the navigation bar, buttons and form controls
  - make fixed or sticky elements position: static
  - replace full-screen heights (h-screen, min-h-screen, 100vh) with auto
  - avoid page breaks inside cards, tables, charts and images
  - disable animations and transitions; show scroll-reveal content
- create every chart with animation: false

@page { size: A4; margin: 12mm; }

@media print {
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  nav, button, form { display: none !important; }

  /* fixed / sticky headers: print once, at the top */
  .fixed, .sticky, header { position: static !important; }

  /* full-screen hero sections (Tailwind h-screen, 100vh) */
  .h-screen, .min-h-screen { height: auto !important; min-height: 0 !important; }

  /* keep blocks whole */
  section > *, .card, table, tr, canvas, svg, img { break-inside: avoid; }

  /* no half-finished animations, show scroll-reveal content (AOS) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

• Le CSS ci-dessus est le type de bloc que vous devriez obtenir ; vous pouvez aussi le coller vous-même avant la balise </style>.
• Avec Tailwind, vous pouvez faire la même chose grâce à la variante print:, par exemple class="print:hidden" sur la navigation.
• La règle [data-aos] ne sert que si la page utilise la bibliothèque d’animations au défilement AOS ; d’autres bibliothèques utilisent d’autres attributs.
• Des sélecteurs comme header ou section > * sont volontairement larges ; ajustez-les s’ils masquent ou regroupent plus que voulu.

Désactiver les animations des graphiques

Les graphiques animés sont la cause la plus fréquente de zones vides dans un PDF exporté. Avec Chart.js, une seule ligne désactive l’animation de tous les graphiques de la page :

// once, before creating the charts (Chart.js 3 and 4)
Chart.defaults.animation = false;

// or for a single chart
new Chart(document.getElementById('sales'), {
  type: 'bar',
  data: { labels: ['Q1', 'Q2', 'Q3'], datasets: [{ label: 'Sales', data: [12, 19, 15] }] },
  options: { animation: false }
});

Imprimer ou Télécharger le PDF : quel bouton choisir ?

• Imprimer / Enregistrer en PDF utilise le moteur d’impression du navigateur : texte sélectionnable et consultable, fichiers légers, et votre CSS d’impression est appliqué. Idéal pour les documents que l’on lit, où l’on cherche ou que l’on copie.
• Télécharger le PDF crée des pages à partir de captures : un clic, rendu identique à l’écran, mais texte non sélectionnable et fichier plus lourd. Idéal pour les tableaux de bord et les pages visuelles.
• Les images d’autres sites qui bloquent l’accès cross-origin peuvent manquer dans Télécharger le PDF mais apparaître à l’impression.
• Les données chargées depuis une API qui refuse la requête, ou le contenu derrière une connexion, n’apparaîtront dans aucun des deux.

Si le résultat semble encore faux, le guide complet est HTML en PDF : problèmes et solutions. Pour une présentation plutôt qu’une page, voyez artefact Claude en PowerPoint, et pour les méthodes générales, convertir HTML en PDF gratuitement.