CODEWITHSUNDEEP
javascriptnode.jspdfpuppeteer
TheProgrammer
TheProgrammer

Reputation: 824

Puppeteer PDF export doesn't render images

I try to export my HTML to a pdf file which works fine except that my images are not loaded. When I use the headless: false option I see the website with the image loaded, but when I export the PDF the image is just the default icon for a non-loaded image: image

My Code:

  const browser = await puppeteer.launch({ headless: false, args: ["--explicitly-allowed-ports=" + port] });
  const page = await browser.newPage();
  await page.setContent(content, { waitUntil: "networkidle0" }); // I also tried "load"
  await page.waitFor(2000); // The page should be loaded for sure
  await page.emulateMediaType("print");
  await page.pdf({ path: "F:\\Desktop\\file.pdf", format: "a4" });
  await browser.close();

I already tried media types "screen" and "print", both don't work. The HTML of the web page is:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head></head>
   <body>
      <p>Es handelt sich hierbei um ein File:</p>
      <p><strong>File:</strong></p>
      <sm-file class="mceNonEditable" title="Bright Solutions _ Digitale Projekt-Checklisten.pdf" data-uuid="AD13E638-6DB5-4DCD-A7F6-03D66C1D24DF" data-name="Bright Solutions _ Digitale Projekt-Checklisten.pdf">
         <img src="http://localhost:6666/icon_file.svg" width="20px" height="20px" />
         <hr />
         Bright Solutions _ Digi... ten.pdf
      </sm-file>
      <p>Hier kommt dann noch ein Bild hinzu!</p>
   </body>
</html>

Does anyone know what I can do so that the image in the PDF is rendered correctly?

Upvotes: 1

Views: 2880

Answers (1)

TheProgrammer
TheProgrammer

Reputation: 824

The reason is ERR_UNSAFE_PORT! The port 6666 is considered unsafe. A full list of unsafe ports can be seen here: https://superuser.com/questions/188058/which-ports-are-considered-unsafe-by-chrome So just change the port of the webserver to something that is not on this list and everything works fine.

Upvotes: 2

Related Questions