node.js - Puppeteer 不渲染存储在 AWS S3 上的图像

Question

我在 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();
  })();

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

提前致谢!

Answer 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 现在可以显示图像。