Full page PDF in Puppeteer

Question

I am trying to get a full page PDF using puppeteer and my code is like this, But the resultant is multiple pages with the height equal to that of the page.

How do i resolve this? TIA.

const puppeteer = require("puppeteer");

function sleep(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

(async () => {
    const browser = await puppeteer.launch({
        headless: true
    });

    const page = await browser.newPage();

    await page.goto("http://localhost:3000/longpage", {
        waitUntil: "networkidle2"
    });

    let height = await page.evaluate(
        () => document.documentElement.offsetHeight
    );

    console.log("Height", height);

    await page.pdf({
        path: "hni.pdf",
        printBackground: true,
        margin: "none",
        height: height + "px"
    });

    await browser.close();
})();

Answer 1

The page you linked uses Bootstrap, which has the following rule in its set (you can find it here):

@page{size:a3}

This will limit the height of the page to the size of a3.

You can either remove the rule (or Bootstrap altogether) from the website or add the following code before calling page.pdf:

await page.addStyleTag({
    content: '@page { size: auto; }',
})