I am trying to print a page with several nvd3 charts to pdf using puppeteer. When using the printing function via the Chrome browser I obtain the following decent output (don't mind the blue borders):

When I try to visit the same page using chrome headless via puppeteer, I get this output instead, spanning over 3 pages:

This is the code that I am using:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setCookie({
        name: 'cookie-a',
        value: '...',
        domain: 'example'
    });
    await page.setCookie({
        name: 'cookie-b',
        value: '...',
        domain: 'example'
    });

    await page.goto('/?bookmark=bot-overview', {waitUntil: 'networkidle'});

    setTimeout(async function () {
        await page.pdf({ path: 'page.pdf', format: 'A4', landscape: true });
        browser.close();
    }, 10000);
})();

I also tried to fix height and width to pixel values, cm and mm, but it doesn't affect the output. Notice that the entire page is styled through pages and bootstrap with their print media stylesheet. I also added several css rules for the printing media (among which the blue borders). One of these rules forces the whole page to be 297mmx210mm big, i.e. the exact size of an A4 page.

I am trying to print a page with several nvd3 charts to pdf using puppeteer. When using the printing function via the Chrome browser I obtain the following decent output (don't mind the blue borders):

When I try to visit the same page using chrome headless via puppeteer, I get this output instead, spanning over 3 pages:

This is the code that I am using:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setCookie({
        name: 'cookie-a',
        value: '...',
        domain: 'example.'
    });
    await page.setCookie({
        name: 'cookie-b',
        value: '...',
        domain: 'example.'
    });

    await page.goto('http://example./search/?bookmark=bot-overview', {waitUntil: 'networkidle'});

    setTimeout(async function () {
        await page.pdf({ path: 'page.pdf', format: 'A4', landscape: true });
        browser.close();
    }, 10000);
})();

I also tried to fix height and width to pixel values, cm and mm, but it doesn't affect the output. Notice that the entire page is styled through pages and bootstrap with their print media stylesheet. I also added several css rules for the printing media (among which the blue borders). One of these rules forces the whole page to be 297mmx210mm big, i.e. the exact size of an A4 page.

• javascript
• google-chrome
• nvd3.js
• google-chrome-headless
• puppeteer

Share Improve this question Follow asked Aug 29, 2017 at 14:23 TotemTotem 47455 silver badges1919 bronze badges 1

• Have you already tried to define the media type using page.emulateMedia() before creating the PDF? – flozia Commented Sep 20, 2017 at 12:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I was facing issues like yours. After a while I was able to fix some of them:

    const puppeteer = require('puppeteer');
    const devices = require('puppeteer/DeviceDescriptors');

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        const url = 'https://example.';

        await page.emulateMedia('screen'); //<--
        await page.goto(url, {waitUntil: 'networkidle'});

        await page.screenshot({path: 'full_img.png', fullPage: true});
        await page.pdf({
          path: 'the_file.pdf', 
          format: 'A4', 
          printBackground: true, //<---
          displayHeaderFooter: true, //<---
          scale: 1,
          landscape: false,
          pageRanges: ""
      });
    })();