Mencipta API Next.js untuk Menukar HTML kepada PDF dengan Puppeteer (Vercel-Serasi)

Menukar HTML kepada PDF ialah keperluan biasa dalam aplikasi web. Dalam catatan blog ini, kami akan meneroka cara membuat laluan API Next.js yang menukar HTML kepada PDF menggunakan Puppeteer dan kami akan memastikan ia berfungsi apabila digunakan ke Vercel.

Cabaran

Walaupun Puppeteer ialah alat yang berkuasa untuk penukaran HTML kepada PDF, ia memberikan cabaran apabila menggunakan persekitaran tanpa pelayan seperti Vercel. Isu utama ialah:

1. Puppeteer memerlukan binari Chromium, yang melebihi had saiz Vercel.
2. Fungsi tanpa pelayan mempunyai masa dan sumber pelaksanaan yang terhad.

Penyelesaian

Kami akan menggunakan gabungan @sparticuz/chromium-min dan puppeteer-core untuk mengatasi batasan ini. Begini cara kami akan mendekatinya:

1. Gunakan binaan Chromium minimum yang direka bentuk untuk persekitaran tanpa pelayan.
2. Konfigurasikan Puppeteer untuk menggunakan versi Chromium minimum ini.
3. Optimumkan proses penjanaan PDF untuk pelaksanaan tanpa pelayan.

Langkah 1: Menyediakan Projek

Mula-mula, buat projek Next.js baharu atau gunakan projek sedia ada. Kemudian, pasang kebergantungan yang diperlukan:

npm install @sparticuz/chromium-min puppeteer-core

Untuk memastikan keserasian dan prestasi optimum, adalah penting untuk menggunakan versi pakej yang diperlukan yang betul. Setakat ujian terkini, versi berikut disyorkan:

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

Langkah 2: Mencipta Laluan API

Buat fail baharu di app/api/html-to-pdf/route.js (untuk penghala apl Next.js 13) atau pages/api/html-to-pdf.js (untuk penghala Halaman). Ini kodnya:

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" }
    });
  }
}

Langkah 3: Memahami Kod

Mari kita pecahkan bahagian utama kod ini:

Konfigurasi Pelayar

Fungsi getBrowser menyediakan Puppeteer dengan perduaan Chromium minimum:

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
  });
}

Konfigurasi ini menggunakan pakej @sparticuz/chromium-min untuk menyediakan perduaan Chromium minimum yang serasi dengan persekitaran tanpa pelayan.

Penjanaan PDF

Logik utama untuk penjanaan PDF adalah dalam fungsi POST:

1. Ekstrak HTML daripada badan permintaan.
2. Lancarkan tika penyemak imbas menggunakan fungsi getBrowser.
3. Buat halaman baharu dan tetapkan kandungannya kepada HTML yang disediakan.
4. Jana PDF daripada kandungan halaman.
5. Tutup penyemak imbas untuk mengosongkan sumber.
6. Kembalikan PDF sebagai respons dengan pengepala yang sesuai.

Langkah 4: Menggunakan API

Untuk menggunakan API ini, hantar permintaan POST dengan kandungan HTML dalam badan permintaan:

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)
}

Pertimbangan Penggunaan

Apabila menggunakan Vercel, ingat perkara ini:

1. Masa Pelaksanaan: Vercel mempunyai masa pelaksanaan maksimum 10 saat untuk rancangan hobi dan 60 saat untuk rancangan pro. Optimumkan proses penjanaan HTML dan PDF anda agar sesuai dalam had ini.

2. Penggunaan Memori: Berhati-hati dengan penggunaan memori. Perduaan Chromium yang minimum membantu, tetapi PDF yang kompleks mungkin masih menggunakan memori yang ketara.

3. Permulaan Sejuk: Fungsi tanpa pelayan boleh mengalami permulaan sejuk. Seruan pertama mungkin lebih perlahan kerana ia perlu memuat turun dan menyediakan binari Chromium.

4. Pengendalian Ralat: Laksanakan pengendalian ralat yang mantap untuk mengurus tamat masa atau kekangan sumber.

5. Caching: Pertimbangkan untuk melaksanakan strategi caching untuk PDF yang kerap dijana untuk mengurangkan beban pada fungsi tanpa pelayan anda.

Kesimpulan

Pendekatan ini membolehkan anda mencipta API penukaran HTML kepada PDF yang berkuasa menggunakan Next.js dan Puppeteer, serasi dengan persekitaran tanpa pelayan Vercel. Dengan memanfaatkan @sparticuz/chromium-min dan puppeteer-core, kami mengatasi cabaran utama menjalankan Puppeteer dalam konteks tanpa pelayan.

Atas ialah kandungan terperinci Mencipta API Next.js untuk Menukar HTML kepada PDF dengan Puppeteer (Vercel-Serasi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!