Puppeteer: how to generate PDF that only has one page and the page contains all content of webpage

Question

I'm trying to generate pdf with Puppeteer. What I would like to have is that the generated pdf file should only have one page. And this single page contains all content of the webpage.

Following is my code, which is copied from https://github.com/puppeteer/puppeteer/issues/5590#issuecomment-747638812

But it doesn't work as expected.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    defaultViewport: {
      width: 1024,
      height: 800,
    },
    args: [
      '--no-sandbox',
      '--disable-gpu',
      '--hide-scrollbars',
      '--start-fullscreen',
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://www.w3schools.com/', {
    waitUntil: 'networkidle0',
  });
  await page.emulateMediaType('screen');

  const totalPage = await page.$('html');
  const boundingBox = await totalPage.boundingBox();
  console.log(boundingBox);

  await page.pdf({
    path: 'w3schools.pdf', 
    printBackground: true,
    width: '1024px',
    height: `${boundingBox.height + 20}px`,
  });

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

Answer 1

In my experience, the cleaner way to do that, would be using page.eval() to get the document's height and passing it as an option to page.pdf()

const puppeteer = require('puppeteer');

const docHeight = () => {
  const body = document.body
  const html = document.documentElement;
  return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://en.wikipedia.org/wiki/JavaScript");
    const height = await page.evaluate(docHeight);

    await page.pdf({path: `js.pdf`, height: `${height}px`})
    
})();