page break is not working!!! await page.emulateMediaType('screen')

[tmswartz12]

I am attempting to create a PDF of my screen using

    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    })
    console.log('browser has been opened')
    const page = await browser.newPage()
    page.setViewport({width: 1000, height: 1056})
    await page.waitFor(1000)
    await page.emulateMediaType('screen')
    await page.waitFor(5000)
    console.log('about to create PDF - standby')
    const pdf = await page.pdf({
      format: 'Letter',
      printBackground: true,
      path: MY PATH
    })
    console.log('pdf created')
    await browser.close()
    console.log('browser closed')
  }

Locally.. my PDF is returned to my browser with the proper sizing and formatting.. however. when running in production.. my formatting / margins are off..

This creates awkward page breaks in the middle of my content and is not suitable for my client!

I am using "puppeteer": "^2.00.0" and node version 8.16.2

I am using heroku as my server.

Thanks in advance for your help!!!

[tmswartz12]

Here is a picture of my current PDF.. the page is not breaking in the appropriate place.. however it is working on my local machine!!

[tmswartz12]

Seems like puppeteer has some issues with @media print.. I just tried updating my CSS to..

@media print {
    .page {
        page-break-after: always;
    }
}

No luck!!

[radonichn]

As for me, the problem was, that the .page was a flexbox. Check it out.

[tmswartz12]

Ahhhh. so flexbox and page-break-after aren't compatible? Will have to test it.

Ultimately, I developed a work around that did not include Puppeteer. I just formatted my page components to be the size of the browser and then allow the user to print manually from chrome. Not as sexy as sending a scraped Puppeteer PDF being passed via Sendgrid... but got the job done!

[ghost]

You should remove flexbox style in parent element not the element itself.

<div style={{display: 'flex'}}> ---> you should change this one to non-flexbox style
  <div style={{pageBreakAfter: 'always'}}/>
  <div/>
<div/>

[RodolfoSilva]

@SeungjongHan Thanks for the tip, it worked great!

[stale]

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]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!