it is not possible to generate a pdf with a single page with the full height of the page.

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 2.1.1
• Platform / OS version: mac OS Catalina 15.3
• URLs (if applicable): https://flutter.dev/docs/development/ui/widgets-intro
• Node.js version: v13.12.0

What steps will reproduce the problem?

just compile.

Please include code that reproduces the issue.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://flutter.dev/docs/development/ui/widgets-intro', {waitUntil: 'networkidle2'});
  page.evaluate(() => {
    let container = document.querySelector('.container');
    if (!container) {
      container = document.querySelector('#content')
    }
    let html = document.querySelector('html');
    let body = document.querySelector('body');
    let classe = body.classList
    let clone = container.cloneNode(true)
  
    html.removeChild(body);
    body = document.createElement("body").appendChild(clone)
    body.classList = classe
    html.appendChild(body)

  });
  await page.emulateMedia('screen')

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

  await page.pdf({path: 'mypdf.pdf',printBackground: true, height: height + 'px', width: '210mm'});
  await browser.close();
})();

What is the expected result?

a pdf file with a single page of the total height of the url

What happens instead?

a pdf is generated with two pages

[MohamedJakkariya]

@mcama I have a solution for you. but not sure if it works for you. Just working fine for me. Try with the below code for making a single page pdf. Hopefully, it’ll work.

const generatePdf = async () => {
  Logger.info('pdf generation start ...');

  // launch a new chrome instance
  const browser = await puppeteer.launch({
    headless: true
  });

  // create a new page
  const page = await browser.newPage();

  // Load media contents
  await page.emulateMediaFeatures('screen');

  // set your html as the pages content
  const contents = await fs.readFileSync(path.join(ROOT_PATH, 'views', 'orderConfirmation.ejs'), 'utf8');

  const html = await ejs.render(contents, { async: true });

  await page.setContent(html);

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

  // or a .pdf file
  await page.pdf({
    printBackground: true,
    width: `595px`, // 3508 x 2480 (print) || 595 pixels x 842 pixels (screen)
    height: `${boundingBox.height}px`,
    margin: {
      top: '20px',
      bottom: '0px',
      left: '20px',
      right: '20px'
    },
    path: path.join(ROOT_PATH, 'pdf', 'order.pdf')
  });

  // close the browser
  await browser.close();
  Logger.info('pdf generation done ...');
};

Note: Don’t worry about ejs rendering it’s for making dynamic HTML. Make sure you’re properly getting the height of the page.

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

Here, boundingBox object contains { x: 0, y: 0, width: 1280, height: 1235 } information. So here the magic happened 👍 .

[jrandolf]

We no longer support Node < 14, please try this again with the latest version of Puppeteer and Node >= 14. If the issue still occurs, please reopen this issue and update the description 😃