Création d'une API Next.js pour convertir du HTML en PDF avec Puppeteer (compatible Vercel)

La conversion de HTML en PDF est une exigence courante dans les applications Web. Dans cet article de blog, nous explorerons comment créer une route API Next.js qui convertit le HTML en PDF à l'aide de Puppeteer, et nous veillerons à ce qu'elle fonctionne une fois déployée sur Vercel.

Le défi

Bien que Puppeteer soit un outil puissant pour la conversion HTML en PDF, il présente des défis lors du déploiement dans des environnements sans serveur comme Vercel. Les principaux enjeux sont :

1. Puppeteer nécessite un binaire Chromium, qui dépasse les limites de taille de Vercel.
2. Les fonctions sans serveur ont un temps d'exécution et des ressources limités.

La solution

Nous utiliserons une combinaison de @sparticuz/chromium-min et puppeteer-core pour surmonter ces limitations. Voici comment nous allons l'aborder :

1. Utilisez une version Chromium minimale conçue pour les environnements sans serveur.
2. Configurez Puppeteer pour utiliser cette version minimale de Chromium.
3. Optimisez le processus de génération de PDF pour une exécution sans serveur.

Étape 1 : Mise en place du projet

Tout d’abord, créez un nouveau projet Next.js ou utilisez-en un existant. Ensuite, installez les dépendances nécessaires :

npm install @sparticuz/chromium-min puppeteer-core

Pour garantir une compatibilité et des performances optimales, il est important d'utiliser les versions correctes des packages requis. Selon les derniers tests, les versions suivantes sont recommandées :

{
  "dependencies": {
    "@sparticuz/chromium-min": "^129.0.0",
    "puppeteer-core": "^23.5.0"
  }
}

Étape 2 : Création de la route API

Créez un nouveau fichier dans app/api/html-to-pdf/route.js (pour le routeur d'application Next.js 13) ou pages/api/html-to-pdf.js (pour le routeur Pages). Voici le code :

const chromium = require("@sparticuz/chromium-min");
const puppeteer = require("puppeteer-core");

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

export async function POST(request) {
  try {
    const { html } = await request.json();

    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setContent(html, { waitUntil: "networkidle0" });
    const pdfBuffer = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }
    });
    await browser.close();

    return new Response(pdfBuffer, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="output.pdf"'
      }
    });
  } catch (error) {
    console.error("Error generating PDF:", error);
    return new Response(JSON.stringify({ error: "Failed to generate PDF" }), {
      status: 500,
      headers: { "Content-Type": "application/json" }
    });
  }
}

Étape 3 : Comprendre le code

Décomposons les éléments clés de ce code :

Configuration du navigateur

La fonction getBrowser configure Puppeteer avec le binaire Chromium minimal :

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

Cette configuration utilise le package @sparticuz/chromium-min pour fournir un binaire Chromium minimal compatible avec les environnements sans serveur.

Génération PDF

La logique principale de la génération de PDF se trouve dans la fonction POST :

1. Extrayez le code HTML du corps de la requête.
2. Lancez une instance de navigateur à l'aide de la fonction getBrowser.
3. Créez une nouvelle page et définissez son contenu sur le code HTML fourni.
4. Générez un PDF à partir du contenu de la page.
5. Fermez le navigateur pour libérer des ressources.
6. Renvoyer le PDF en réponse avec les en-têtes appropriés.

Étape 4 : Utiliser l'API

Pour utiliser cette API, envoyez une requête POST avec le contenu HTML dans le corps de la requête :

const response = await fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ html: '<h1>Hello, World!</h1>' }),
});

if (response.ok) {
  const blob = await response.blob();
  // Handle the PDF blob (e.g., download or display)
}

Considérations sur le déploiement

Lors du déploiement sur Vercel, gardez ces points à l'esprit :

1. Temps d'exécution : Vercel a un temps d'exécution maximum de 10 secondes pour les plans hobby et de 60 secondes pour les plans pro. Optimisez votre processus de génération HTML et PDF pour respecter ces limites.

2. Utilisation de la mémoire : Soyez attentif à l'utilisation de la mémoire. Le binaire Chromium minimal est utile, mais les PDF complexes peuvent toujours utiliser une quantité importante de mémoire.

3. Démarrages à froid : les fonctions sans serveur peuvent subir des démarrages à froid. La première invocation peut être plus lente car elle nécessite le téléchargement et la configuration du binaire Chromium.

4. Gestion des erreurs : implémentez une gestion robuste des erreurs pour gérer les délais d'attente ou les contraintes de ressources.

5. Mise en cache : envisagez de mettre en œuvre des stratégies de mise en cache pour les PDF fréquemment générés afin de réduire la charge sur vos fonctions sans serveur.

Conclusion

Cette approche vous permet de créer une puissante API de conversion HTML vers PDF à l'aide de Next.js et Puppeteer, compatible avec l'environnement sans serveur de Vercel. En tirant parti de @sparticuz/chromium-min et de puppeteer-core, nous surmontons les principaux défis liés à l'exécution de Puppeteer dans un contexte sans serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!