0

I am generating a PDF from html markup using puppeteer and it prints a logo at the top of the page, so just a single image which isn't very big. This image is fetched from a CDN.

The issue is that a lot of times the image is not rendered properly. Sometimes it is fine but like I say, a lot of times it isn't. I don't know if this is because the image has not fully downloaded by the time the PDF has generated or what the issue could be. I have attached 2 images, one where it rendered correctly and the other when it doesn't.

Here is the code where I generate the PDF and send it to the CDN. So, the image for the PDF is fetched from the CDN and the PDF file itself is sent to the CDN.

const browser = await puppeteer.launch({
  args: ["--no-sandbox", "--disable-setuid-sandbox"],
});
const page = await browser.newPage();
await page.setContent(pdfTemplate(invoice), {
  waitUntil: "networkidle2",
});

const screenshot = await page.pdf({
  encoding: "binary",
});
await browser.close();

let cld_upload_stream = cloudinary.uploader.upload_stream(
  {
    folder: "documents",
    public_id: invoiceId,
  },
  function (error, result) {
    console.log(error);
    res.status(201).json({
      secure_url: result.secure_url,
      public_id: result.public_id,
    });
  }
);
streamifier.createReadStream(screenshot).pipe(cld_upload_stream);

enter image description here

enter image description here

Waterfall
  • 584
  • 1
  • 5
  • 15
  • 1
    networkidle2 means 2 requests can still be outstanding when the page is considered done loading and the promise resolves. Maybe try something stricter, like networkidle0, for starters. See [Puppeteer wait until page is completely loaded](https://stackoverflow.com/questions/52497252/puppeteer-wait-until-page-is-completely-loaded) for more strategies. – ggorlen Jun 26 '21 at 18:28
  • 1
    @ggorlen so far your suggestion of changing to networkidle0 appears to be working! I will keep testing but so far so good. Thanks so much! – Waterfall Jun 26 '21 at 18:39

0 Answers0