Sparticuz chromium-min working with vercel for pdf

Help
2

Hey Levelz3111 :smiley:

I was able to take inspiration from this post on medium and get a working deployment on Vercel.

The big difference is it utlizes the remote executable vs trying to find the one if the file system from the dependency.

I’m not sure if that will give you what you need, my example just took a PDF of a site and returns it as a buffer. I’ll add the relevant bits below, curious to know your thoughts:

// package.json
"dependencies": {
    "@sparticuz/chromium-min": "^133.0.0",
    "next": "15.2.4",
    "puppeteer-core": "^24.5.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },

The Next Config

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
// v15 made this property stable
  serverExternalPackages: ["puppeteer-core", "@sparticuz/chromium"],
};

export default nextConfig;

Here is the main pdf service I have

// @/lib/pdf.ts
import chromium from "@sparticuz/chromium-min";
import puppeteerCore from "puppeteer-core";

async function getBrowser() {
  const REMOTE_PATH = process.env.CHROMIUM_REMOTE_EXEC_PATH;
  const LOCAL_PATH = process.env.CHROMIUM_LOCAL_EXEC_PATH;
  if (!REMOTE_PATH && !LOCAL_PATH) {
    throw new Error("Missing a path for chromium executable");
  }

  if (!!REMOTE_PATH) {
    return await puppeteerCore.launch({
      args: chromium.args,
      executablePath: await chromium.executablePath(
        process.env.CHROMIUM_REMOTE_EXEC_PATH,
      ),
      defaultViewport: null,
      headless: true,
    });
  }

  return await puppeteerCore.launch({
    executablePath: LOCAL_PATH,
    defaultViewport: null,
    headless: true,
  });
}

export const makePDFFromDomain = async (url: string): Promise<Buffer> => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();

    page.on("pageerror", (err: Error) => {
      throw err;
    });
    page.on("error", (err: Error) => {
      throw err;
    });

    await page.goto(url);
    await page.setViewport({ width: 1080, height: 1024 });

    const pdf = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "0", right: "0", bottom: "0", left: "0" },
      preferCSSPageSize: true,
      displayHeaderFooter: false,
      scale: 1.0,
    });

    return Buffer.from(pdf);
  } catch (error) {
    throw error;
  }
};

Please let me know if any of this helped, happy to keep trying to find a solution for you!

4 Likes