使用 Heroku 进行 Puppeteer 图像样式设置答案

【问题标题】：Puppteer image styling off using heroku使用 Heroku 进行 Puppeteer 图像样式设置
【发布时间】：2019-09-25 03:35:54
【问题描述】：

在本地使用 puppeteer 拍摄一些 HTML 的图像按预期工作，但是当推送到 heroku 时，图像内的部分不对齐。

它们都使用相同的代码：

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox']
 })
await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
await page.screenshot({ path: 'example.png' })
await browser.close()

我在本地使用 macOS，我相信 heroku 是 ubuntu。

这可能是 CSS 问题，但我不确定，因为其他 CSS 规则在同一张图片中显示正常。 puppeteer 会忽略某些样式而不是整个样式表是否有意义？

这是本地拍摄的图像：在heroku上拍摄的图像：

由于当页面以纯 HTML 呈现时 heroku 尊重 CSS，这让我相信这一定是一个 puppeteer 问题。 Link 到纯 HTML 版本（页面可能需要一些时间加载 - 10+ 秒）。

我用 puppeteer 开了一个issue。没有错误消息，因此欢迎提供调试帮助。

【问题讨论】：

"one is mac other is heroku" 可能不同之处在于 chrome 呈现这些页面的方式，请注意屏幕截图的分辨率不同。

标签： node.js heroku puppeteer

【解决方案1】：

我认为这是 ubuntu 上的视口区域太小并将 HTML 推到一起。在生产中添加不同的视口宽度解决了这个问题。

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    })
const page = await browser.newPage()
/////// added this
 await page.setViewport({
      width: 1000,
      height: 600,
      deviceScaleFactor: 1
})

await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
await page.screenshot({ path: 'example.png' })
await browser.close()
    await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
    await page.screenshot({ path: 'example.png' })
    await browser.close()
})

【讨论】：