木偶师/英雄库 - 页面.pdf在本地与生产环境中分页符不同

Question

我正在尝试在本地开发中使用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构建包的所有者交谈以确认这不是问题 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

Answer 1

puppyteer

不能将page-break-<any>CSS 规则与flexbox一起使用。在没有弹性框的情况下重写您的 css，puppyteer将按要求使用分页符