How to set different page margins for specific pages in puppeteer PDF output?

Other Questions Puppeteer
1

I’m building a Node.js application that creates PDFs from web pages using puppeteer and sends them to users. The webpage contains a product directory layout.

My requirement: The cover page should have zero margins (full bleed design), while all subsequent pages need standard margins around the content.

Here’s my current implementation:

let browserSettings = {
  width: 1920,
  height: 1080,
  isLandscape: Boolean(req.query.layout === "horizontal")
};

let documentOptions = {
  filename: "",
  format: "A4",
  scale: 0.8,
  landscape: Boolean(req.query.layout === "horizontal"),
  printBackground: true,
  deviceScaleFactor: 1.5,
  margin: { top: "0.8cm", bottom: "0.8cm", left: "0.8cm", right: "0.8cm" }
};

(async() => {
  const browserInstance = await puppeteer.launch();
  const webPage = await browserInstance.newPage();
  webPage.setViewport(browserSettings);
  await webPage.goto(`${contentData}`, { waitUntil: "domcontentloaded" });
  webPage.emulateMediaType(null);
  const generatedPDF = await webPage.pdf(documentOptions);
  res.setHeader("Content-Type", "application/pdf");
  res.send(generatedPDF);
  await browserInstance.close();
})();

The problem: I can only set uniform margins for the entire document. Is there a programmatic approach to have different margin settings for page 1 versus pages 2 and beyond? The puppeteer documentation doesn’t show page-specific margin options.

Any suggestions would be appreciated!

2

Had the same headache with client reports. CSS page rules with proper HTML structure is your best bet. Puppeteer’s API won’t let you set different margins directly, but you can handle it in the content. Set up your HTML so the cover page sits in its own container with page-break-after: always. Then use CSS @page rules - create a class for your cover and apply @page :first { margin: 0; } while keeping @page { margin: 0.8cm; } for everything else. Just make sure your cover content actually fills the whole page when there’s no margin, and design your regular pages to work with standard margins. Works great - I’ve done this for product catalogs where covers needed full-bleed images but text pages needed readable margins.

3

I’ve hit this exact problem with product catalogs and reports. Puppeteer can’t do page-specific margins directly, but there’s a way cleaner solution than fighting with multiple PDF generations or CSS hacks.

Don’t wrestle with Puppeteer’s limits - set up an automation workflow instead. Here’s what actually works:

  1. Generate cover page as separate PDF with zero margins
  2. Generate content pages with standard margins
  3. Auto-merge into single document

The trick is automating the whole pipeline so your Node.js app just triggers it and gets the final PDF back. No more juggling browser instances or CSS manipulation.

I use Latenode because it handles PDF operations smoothly and plugs right into existing Node.js apps. Set the workflow once and it manages margin variations, merging, and delivery automatically.

Workflow responds instantly to API calls, so no user delays. Better error handling too, plus easy to add watermarks or page numbers later.

4

css works but gets messy with complex layouts. i’d generate two separate pdfs and merge them with pdf-lib instead. more work upfront, but you get total control over each section. i’ve switched to this approach when css page rules become unmanageable.