puppeteer: Page.pdf does not honor width and height parameters and is missing content

Puppeteer version: 1.9
Platform / OS version: ubuntu-xenial-16.04-amd64-server-20180627
Node.js version: 6.4.1

What steps will reproduce the problem?

Here is code that uses Page.pdf() and Page.screenshot() to capture a single-page web application and write the browser window contents to PDF- and PNG-formatted files for comparison:

'use strict';

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--start-maximized'
        ],
        timeout: 10000
    });
    var page = await browser.newPage();
    await page.setViewport({
        width: 1024,
        height: 1280,
        deviceScaleFactor: 1
    });
    await page.emulateMedia('screen');

    const url = 'http://higlass.io/app';
    await page.goto(url, {
        waitUntil: ['load', 'domcontentloaded', 'networkidle2', 'networkidle0']
    });

    await page.pdf({
        path: 'localPuppeteerTest.pdf',
        width: '1024px',
        height: '1280px',
        pageRanges: '1-1'
    });

    await page.screenshot({path: 'localPuppeteerTest.png', fullPage: true});

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

What is the expected result?

The expected result is what is shown in the PNG screenshot:

localpuppeteertestcorrect

What happens instead?

While the PNG is rendered correctly, the PDF rendering appears to ignore the specified page viewport dimensions and is missing content:

localpuppeteertestincorrect

The PNG renderer appears to respect the page viewport dimensions, and contains all content (such as the element to the right of the “HiGlass” title).

Ideally, the PDF output should match the PNG output in respect to specified dimensions and content.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 17

Most upvoted comments

I am experiencing a similar issue.

    await page.pdf({
      path: `${outputFolder}/${outputName}.pdf`,
      printBackground: true,
      width: 612,
      height: 792
    })

produces a PDF with dimensions 458 x 594.

Settings the size via @page css produces the same result. Setting the viewport to 612 x 792 also does not fix the issue.

To me it feels like the width, height and defaultViewport options are completely ignored.

+17

lbittner-pdftron on Oct 31, 2018

Seems like a DPI of 96 is assumed in the conversion from px to inches here: https://github.com/puppeteer/puppeteer/blob/9923e56b3ed05cde014c0047a4f65fef7749ebb0/lib/Page.js#L1267

Whereas some machines may default to a DPI of 72 when calling the Page.printToPDF method here: https://chromedevtools.github.io/devtools-protocol/tot/Page#method-printToPDF. Perhaps a workaround for now is to scale it up before printing:

const pdf = await page.pdf({
    height: height / 0.75,
    width: width / 0.75,
    scale: 1 / 0.75,
    printBackground: true,
 });

+12

senluchen2015 on Feb 3, 2020

We’re marking this issue as unconfirmed because it has not had recent activity and we weren’t able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

stale[bot] on Jun 25, 2022

@plaurent the original post is passing the width and height to page.pdf() without passing a value for format. The person who submitted the issue you are referring to was passing ‘A4’ as the format and width and height values. format overrides width and height.

jonnypickett on Jan 9, 2019

For me I had to remove the format key and leave the width and height

await page.pdf({
  // format: 'A4', // Removed this and it worked.
  width: '1123px',
  height: '794px',
});

rotimi-best on Jul 27, 2023

Seems like a DPI of 96 is assumed in the conversion from px to inches here: https://github.com/puppeteer/puppeteer/blob/9923e56b3ed05cde014c0047a4f65fef7749ebb0/lib/Page.js#L1267

Whereas some machines may default to a DPI of 72 when calling the Page.printToPDF method here: https://chromedevtools.github.io/devtools-protocol/tot/Page#method-printToPDF. Perhaps a workaround for now is to scale it up before printing:
const pdf = await page.pdf({
    height: height / 0.75,
    width: width / 0.75,
    scale: 1 / 0.75,
    printBackground: true,
 });
@senluchen2015 what is the 0.75 referring to in this case? For me the PDF turns out as expected when I set it to 0.65, and I assume it depends on the DPI, but wondering the math used to find this number? Or is it just something you need to eyeball? relaxed

I believe 0.75 comes from 72/96 which is the intended DPI divided by the one assumed in the code.

techsavvyash on Jun 23, 2023

I had the same issue before, and I tried @senluchen2015 his code and solved this.

However, suddenly it no longer worked My env is: docker: node-10-slim(debian 9) puppeteer: 5.50(latest) chrome: 87.0.4280.66-1(latest)

All I know is that this related to chrome version, I tried an older version of chrome, eg: ‘81.0.4044.113-1’. Then it worked.

senlyu on Nov 30, 2020

@senluchen2015 makes so much sense and thanks for sharing this info. I had the same scaling to get the pixels right too, but never knew why till seeing your response.

phuang0619 on Feb 8, 2020

This seems to be an issue for me as well. If there’s no bandwidth to fix it, could there be a warning in the API docs to let people know that this feature may not work as advertised?

rjconrad on Jan 21, 2020

Having the same issue.

0x15f on Sep 11, 2019

Same to me. Set width but the ouput pdf file does not fix to that width

wellingfine on Sep 11, 2019

Same issue. Does anybody found a solution?

mksztv on Aug 31, 2019

I am facing the same issue, height and width doesn’t work as though with viewport

pravari1 on Apr 18, 2019

i’m facing the same issue.

ronalb on Dec 5, 2018