Puppeteer / Heroku - page.pdf 在本地与生产环境中的分页符不同答案

【问题标题】：Puppeteer / Heroku - page.pdf page-break different when in local vs production environmentPuppeteer / Heroku - page.pdf 在本地与生产环境中的分页符不同
【发布时间】：2020-01-10 01:41:48
【问题描述】：

我正在尝试使用 Puppeteer 生成页面的 PDF .. 在本地开发中.. 我能够返回带有适当分页符的 PDF.. 但是在生产（Heroku 服务器）中，我的 PDF 中间有分页符我的内容！

代码如下：

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')
  }

我尝试过的事情..

更改 CSS 以包含以下内容..

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

与 heroku / puppeteer buildpack 的所有者交谈以确认这不是问题 https://github.com/jontewks/puppeteer-heroku-buildpack/issues/59
通过 PPTR github 存储库向合作者发送电子邮件
测试了各种不同类型的 page.emulateMedia() 和样式选项

这是一个奇怪的分页符的截图供参考.. https://user-images.githubusercontent.com/31495981/72014061-2aba7000-322d-11ea-8334-1d1df80f41d5.png

【问题讨论】：

puppeteer 在@media print 和 page-break-after 方面存在一些问题。对我来说，page.emulateMediaType('print') 方法会导致一些问题。完全没有错误，只是木偶师破坏了工作。

标签： heroku pdf-generation puppeteer chromium headless-browser

【解决方案1】：

puppyteer 不能将page-break-<any> css 规则与flexbox 一起使用。在没有 flexbox 的情况下重写你的 css，puppyteer 将使用分页符

【讨论】：