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

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!!!

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8

Top GitHub Comments

19reactions

SeungjongHancommented, Nov 5, 2020

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/>

1reaction

radonichncommented, Apr 22, 2020

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

Top Results From Across the Web

Puppeteer pdf page break bug - Stack Overflow

It works good for one page but when I try to generate multipage pdf document, I have a bug with page breaks. HTML...

Puppeteer Pdf Page Break Bug - ADocLib

Apparently the support for css pagebreak is not ideal: issues lead me to ... emulateMediaType'print'; +await page.evaluate matchMedia'screen'.matches; +//.

node_modules/puppeteer/lib/types.d.ts - devtools ... - Google Git

const snapshot = await page.accessibility.snapshot();. * console.log(snapshot); ... **NOTE** BrowserFetcher is not designed to work concurrently with other.

wendigo - npm

Returns an object with all the computed css styles of the first element matching the given selector, throws if no element is found....

Puppeteer | Puppeteer

Capture a timeline trace of your site to help diagnose performance issues. ... Wait for the results page to load and display the...