Comment convertir du HTML en PDF gratuitement : 3 méthodes qui marchent vraiment

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

La façon la plus simple de convertir du HTML en PDF gratuitement est votre navigateur : ouvrez le fichier, appuyez sur Ctrl+P (Cmd+P sur Mac), choisissez « Enregistrer au format PDF » et activez les graphiques d’arrière-plan. Pour une copie visuelle en un clic, html2canvas avec jsPDF capture la page en PDF. Les développeurs peuvent automatiser avec Chrome headless ou page.pdf() de Puppeteer.

Quelle méthode gratuite choisir ?

Les trois méthodes sont gratuites et aucune n’exige un service en ligne qui envoie votre fichier sur un serveur. Elles diffèrent sur un point essentiel : le PDF contient-il du vrai texte (sélectionnable, consultable, léger) ou une image de la page (identique à l’écran, mais texte non sélectionnable) ?

Si vous voulez simplement le résultat sans rien installer, notre convertisseur HTML en PDF gratuit applique pour vous les méthodes 1 et 2 dans le navigateur, avec des correctifs pour les problèmes habituels des pages modernes. Le tableau ci-dessous résume les compromis.

Méthode 1 : Imprimer → Enregistrer au format PDF

Tous les navigateurs modernes savent produire un PDF via la boîte d’impression. Le texte reste du vrai texte, les liens restent généralement cliquables et le fichier est léger. C’est la méthode à essayer en premier.

1. Ouvrez le fichier .html dans Chrome, Edge, Firefox ou Safari (double-clic, ou glisser-déposer sur une fenêtre du navigateur).
2. Attendez que les polices, les images et les graphiques soient entièrement chargés.
3. Appuyez sur Ctrl+P sous Windows ou Linux, Cmd+P sur Mac.
4. Chrome et Edge : réglez la destination sur « Enregistrer au format PDF ». Firefox : choisissez « Enregistrer au format PDF ». Safari : utilisez Fichier → Exporter au format PDF, ou le menu PDF de la boîte d’impression.
5. Ouvrez « Plus de paramètres » (Chrome/Edge) et cochez « Graphiques d’arrière-plan » ; dans Firefox, l’option s’appelle « Imprimer les arrière-plans » ; dans Safari, cliquez sur « Afficher les détails » puis cochez « Imprimer les arrière-plans ».
6. Choisissez le format (A4 ou Letter), l’orientation et les marges, décochez « En-têtes et pieds de page » si vous ne voulez pas la date et le chemin du fichier sur chaque page, puis enregistrez.

Les réglages qui changent le plus le résultat

• Graphiques d’arrière-plan : désactivés par défaut, d’où les designs sombres ou colorés qui sortent en blanc.
• Marges : « Aucune » ou « Minimum » pour un design bord à bord, « Par défaut » pour un document.
• Échelle : 80 à 90 % évite souvent qu’une mise en page large soit coupée à droite.
• Mise en page : paysage pour les tableaux de bord et les tableaux larges.

Sur un téléphone

La même méthode fonctionne sur mobile. Dans Chrome pour Android, ouvrez le menu, choisissez Partager → Imprimer et sélectionnez « Enregistrer au format PDF » comme imprimante. Dans Safari sur iPhone, touchez Partager → Imprimer, puis utilisez le bouton de partage des options d’impression pour enregistrer le PDF dans Fichiers. Les options comme les fonds et les marges sont plus limitées que sur un ordinateur.

Méthode 2 : capturer la page avec html2canvas et jsPDF

html2canvas redessine la page dans un canvas, puis jsPDF place cette image dans des pages PDF. Le résultat est très proche de l’écran, fonds et polices web compris, car le CSS d’impression est ignoré. La contrepartie : le PDF est une suite d’images, le texte n’est ni sélectionnable ni consultable, et les fichiers sont plus lourds.

Ajoutez les deux bibliothèques à votre page et appelez la fonction depuis un bouton. Cet extrait découpe une capture verticale en pages A4 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
async function savePdf() {
  const el = document.querySelector('#report');
  const canvas = await html2canvas(el, { scale: 2, useCORS: true });
  const img = canvas.toDataURL('image/jpeg', 0.92);

  const pdf = new window.jspdf.jsPDF({ unit: 'mm', format: 'a4' });
  const pageW = pdf.internal.pageSize.getWidth();
  const pageH = pdf.internal.pageSize.getHeight();
  const imgH = canvas.height * pageW / canvas.width;

  // one tall image, shifted up by one page height on each new page
  for (let y = 0; y < imgH; y += pageH) {
    if (y > 0) pdf.addPage();
    pdf.addImage(img, 'JPEG', 0, -y, pageW, imgH);
  }
  pdf.save('report.pdf');
}
</script>

• useCORS: true permet d’afficher les images d’autres domaines, à condition que ces serveurs envoient des en-têtes CORS ; sinon elles restent vides.
• scale: 2 donne un texte plus net, au prix d’un fichier plus lourd.
• html2canvas réimplémente lui-même le CSS : certaines fonctionnalités récentes (par exemple les couleurs oklch(), utilisées par Tailwind CSS v4, et certains filtres) peuvent mal s’afficher ou faire échouer la capture.
• Découper à la hauteur de page peut couper une ligne de texte en deux ; un découpage plus intelligent demande du code supplémentaire.

Méthode 3 : Chrome headless et Puppeteer pour les développeurs

Si vous convertissez beaucoup de fichiers, ou avez besoin d’un PDF côté serveur, lancez Chrome sans fenêtre. Il utilise le même moteur que la boîte d’impression de Chrome : vrai texte, prise en charge du CSS d’impression, et aucun clic.

Une seule commande avec Chrome

Chrome peut imprimer un fichier local ou une URL directement en PDF. Utilisez des chemins absolus sous Windows.

# Windows (PowerShell)
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --headless --no-pdf-header-footer --print-to-pdf="C:\out\page.pdf" "C:\work\page.html"

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --no-pdf-header-footer --print-to-pdf=page.pdf page.html

Plus de contrôle avec Puppeteer

Puppeteer (Node.js) permet d’attendre la fin des requêtes réseau, de conserver les fonds et de fixer le format et les marges dans le code.

// npm install puppeteer   (downloads its own Chrome)
import puppeteer from 'puppeteer';
import { pathToFileURL } from 'node:url';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(pathToFileURL('page.html').href, { waitUntil: 'networkidle0' });
await page.pdf({
  path: 'page.pdf',
  format: 'A4',
  printBackground: true,
  margin: { top: '12mm', right: '12mm', bottom: '12mm', left: '12mm' }
});
await browser.close();

• printBackground: true est l’équivalent scripté de la case « Graphiques d’arrière-plan ».
• Ajoutez preferCSSPageSize: true si votre feuille de style définit @page size.
• Playwright propose un page.pdf() équivalent pour Chromium.

Les méthodes 1 et 2 sans aucune installation

La plupart des gens ne veulent ni modifier la page ni installer Node.js. L’outil gratuit HTML en PDF réunit les deux méthodes du navigateur sur un seul écran. Votre fichier est ouvert dans un cadre isolé (sandbox) de votre propre navigateur et n’est jamais envoyé ; pas d’inscription, pas de filigrane.

1. Déposez un ou plusieurs fichiers .html, collez le code, ou déposez un .zip contenant le HTML avec ses images, CSS et polices.
2. Choisissez A4, US Letter ou diapositives 16:9, l’orientation et les marges.
3. Si la page utilise le CDN Tailwind ou des graphiques animés, augmentez la valeur « attendre N secondes ».
4. Gardez 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 pleine hauteur calées sur la hauteur de page, fonds sombres conservés.
5. Cliquez sur « Imprimer / Enregistrer en PDF » pour un texte sélectionnable (méthode 1), ou sur « Télécharger le PDF » pour une copie fidèle au pixel en un clic (méthode 2, texte non sélectionnable).

Quelques lignes de CSS d’impression pour un PDF plus propre

Les méthodes 1 et 3 suivent la feuille de style d’impression de la page. Un court bloc @media print règle la plupart des problèmes à la source : format, marges, couleurs de fond et coupures malvenues.

@page {
  size: A4;          /* or: letter, or A4 landscape */
  margin: 12mm;
}

@media print {
  /* keep background colours and images */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* hide what makes no sense on paper */
  nav, .no-print, button {
    display: none !important;
  }
  /* avoid cutting blocks in half */
  figure, img, table, tr, .card {
    break-inside: avoid;
  }
  h1, h2, h3 {
    break-after: avoid;
  }
}

• print-color-adjust: exact demande au navigateur de garder les fonds même si l’utilisateur oublie la case (les anciennes versions de Chrome demandent aussi le préfixe -webkit-).
• break-inside: avoid garde les images, cartes et lignes de tableau sur une même page lorsque c’est possible.
• @page size est respecté par Chrome, Edge et Firefox ; la prise en charge de Safari est plus limitée, réglez donc aussi le format dans la boîte d’impression.

Pour aller plus loin

Si votre page vient d’une IA, lisez ChatGPT : HTML en PDF sans casser la mise en page. Pour une présentation, voyez des slides HTML en PPTX.

Problèmes fréquents et solutions rapides

• Page blanche au lieu d’un design sombre : activez les graphiques d’arrière-plan ou ajoutez print-color-adjust: exact.
• Mauvaise police : la police web n’était pas encore chargée ; patientez avant d’imprimer, ou intégrez les fichiers de police dans un .zip.
• Graphique vide : il était encore en cours d’animation ; désactivez l’animation ou attendez plus longtemps.
• En-tête répété sur chaque page : les éléments en position: fixed s’impriment sur chaque page dans Chrome ; masquez-les avec @media print ou utilisez le correctif d’en-tête fixe du convertisseur.
• Grands espaces vides : les sections en height: 100vh occupent une page entière ; passez-les en height: auto à l’impression.

Chacun de ces cas est détaillé, avec le correctif CSS, dans HTML en PDF : problèmes et solutions.

Confidentialité : où va votre HTML ?

Beaucoup de « convertisseurs en ligne » envoient votre fichier sur un serveur pour le rendre. C’est gênant pour des rapports clients, des factures ou des pages contenant des clés d’API. Les trois méthodes ci-dessus gardent le fichier sur votre ordinateur, tout comme notre convertisseur dans le navigateur.

Une nuance honnête : si la page charge elle-même Google Fonts, le CDN Tailwind ou des images hébergées ailleurs, votre navigateur récupère ces ressources, exactement comme lorsque vous ouvrez le fichier normalement. Le HTML lui-même n’est envoyé nulle part.