Puppeteer 不渲染存储在 AWS S3 上的图像答案

【问题标题】：Puppeteer not rendering images stored on AWS S3Puppeteer 不渲染存储在 AWS S3 上的图像
【发布时间】：2020-04-18 20:36:03
【问题描述】：

我在 Nodejs 上使用 Puppeteer 通过页面呈现 PDF 文档。但是，似乎无法加载托管在 AWS S3 上的图像，而本地存储在服务器本身上的图像可以正常加载。

我尝试同时添加waitUntil: "networkidle0" 和waitUntil: "networkidle1"，但它仍然不起作用。我也尝试添加printBackground: true。

The images loads perfectly fine on the page as seen here

However, on the PDF generated by Puppeteer, the images does not load

这是我的代码：

 (async () => {
    const browser = await puppeteer.launch({
      args: ["--no-sandbox"]
    });
    const page = await browser.newPage();

    await page.setExtraHTTPHeaders({
      authorization: req.session.token
    });

    await page.goto(config.url + "/project/download/" + permalink, {
      waitUntil: "networkidle0"
    });

    const buffer = await page.pdf({
      filename: permalink + "_ProjectBrief" + ".pdf",
      format: "A4",
      margin: {
        top: 60,
        bottom: 60,
        left: 60,
        right: 50
      },
    });
    res.type("application/pdf");
    res.send(buffer);
    await browser.close();
  })();

知道我应该怎么做才能解决这个问题吗？

提前致谢！

【问题讨论】：

标签： node.js express puppeteer

【解决方案1】：

我想我解决了这个问题。

添加headless: false后

const browser = await puppeteer.launch({
      args: ["--no-sandbox"]
    });

我意识到由于 400 错误而无法加载图像。我的假设是 Chromium 没有足够的时间下载图像并因此引发此错误。

我所做的是编辑我希望 Puppeteer 呈现的 HTML 文件，并将以下代码添加到其中：

data.ProjectImages.forEach(e => {
   window.open(e.imageUrl, '_blank');
});

它的作用是通过其 URL 将图像打开到一个新选项卡上。这可确保将图像下载到 Chromium 实例（Puppeteer 运行 Chromium）。

渲染的 PDF 现在可以显示图像了。

【讨论】：