Creating PDFs using Puppeteer in the presence of `link` tags

Question

Creating PDFs using Puppeteer in the presence of `link` tags

On my website, students have the ability to create their own notes using a RichText editor where the content can be quite complex. I want to provide them with an option to download these notes as a PDF file. To achieve this, I am planning to use the "puppeteer" tool. When I tested it by navigating to a specific page on my site, the outcome looked promising. However, for the note-printing functionality, I don't want to navigate to a separate page; instead, I just want to pass an HTML snippet of a div that contains the notes. The issue I'm facing is that when I do this, the styles are not preserved and the final output appears very poorly formatted. Since I am using NextJS with Tailwind CSS, with many styles being added through link tags, I suspect that puppeteer may not recognize them resulting in the style discrepancies. What could be a potential solution to ensure that the styles are applied correctly? Here is my current implementation:



  async generatePdfFromHtml(user: UserEntity, data: InputGetPdfDto) {
    const browser = await puppeteer.launch({ executablePath: puppeteer.executablePath('chrome') });
    const page = await browser.newPage();
    const html = data.html;
    await page.setContent(html, { waitUntil: 'networkidle2' });

    console.log(html);

    const fileName = `element-${Date.now()}.pdf`;
    const filePath = path.join('output', fileName);

    await page.pdf({
      path: filePath,
      format: 'A4',
      printBackground: true,
      timeout: 0,
    });

    await browser.close();

    return filePath;
  }

MORE DETAILS

My website structure resembles the following:

<html lang="en" class="dark" style="color-scheme: dark;">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/_next/static/css/app/layout.css?v=1717793996045" data-precedence="next_static/css/app/layout.css">

// content 

</html>

I aim to include a button labeled "Download as PDF", which will convert a div with the ID notes into a PDF file. My goal is to retain all the original styles used on the website that are linked via link tags. Currently, the html being used consists simply of the outerHTML of the div#notes. Naturally, when I utilize page.setContent(html), the result appears messy due to the absence of styles. How can I rectify this issue?

css next.js tailwind-css puppeteer

Answer 1

Answer №1

Without knowing all the specifics of your situation, it's worth mentioning that when you use setContent in JavaScript, it causes the browser to interpret an HTML string. This string may contain requests for external assets, which the browser will try to fetch. However, trying to access these assets directly from a local file won't work; they need to be served by a server.

To illustrate this issue and offer a solution, consider the following example:

make-pdf.js:

const puppeteer = require("puppeteer"); // ^22.10.0

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const html = await fs.readFile("test.html", "utf-8");
  await page.setContent(html, {waitUntil: "networkidle2"});
  await page.pdf({path: "test.pdf"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

test.html:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="test.css"></link>
</head>
<body>
<h1>Hello World</h1>
</body></html>

test.css:

body {
  color: red;
}

If you run node make-pdf and open the resulting test.pdf, you'll notice that the red text is missing because the CSS asset failed to load. This behavior is expected as accessing local files without a proper server setup is restricted. Checking the network log in the browser's developer tools while opening the test.html file will confirm this loading error.

To resolve this issue, you can set up a web server in your current working directory (such as using python http.server) and update the asset link to point to the hosted version:

<link rel="stylesheet" href="http://localhost:8000/test.css"></link>

Rerun the node make-pdf command, and now you should see the PDF displaying with the intended red background.

In a production environment, connect to your static file server (typically same-origin) without requiring a prefix. Adjust your Puppeteer code to insert a flag into the HTML or perform string replacement based on the environment to determine the appropriate URL.

...

Answer 2

Without knowing all the specifics of your situation, it's worth mentioning that when you use setContent in JavaScript, it causes the browser to interpret an HTML string. This string may contain requests for external assets, which the browser will try to fetch. However, trying to access these assets directly from a local file won't work; they need to be served by a server.

To illustrate this issue and offer a solution, consider the following example:

make-pdf.js:

const puppeteer = require("puppeteer"); // ^22.10.0

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const html = await fs.readFile("test.html", "utf-8");
  await page.setContent(html, {waitUntil: "networkidle2"});
  await page.pdf({path: "test.pdf"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

test.html:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="test.css"></link>
</head>
<body>
<h1>Hello World</h1>
</body></html>

test.css:

body {
  color: red;
}

If you run node make-pdf and open the resulting test.pdf, you'll notice that the red text is missing because the CSS asset failed to load. This behavior is expected as accessing local files without a proper server setup is restricted. Checking the network log in the browser's developer tools while opening the test.html file will confirm this loading error.

To resolve this issue, you can set up a web server in your current working directory (such as using python http.server) and update the asset link to point to the hosted version:

<link rel="stylesheet" href="http://localhost:8000/test.css"></link>

Rerun the node make-pdf command, and now you should see the PDF displaying with the intended red background.

In a production environment, connect to your static file server (typically same-origin) without requiring a prefix. Adjust your Puppeteer code to insert a flag into the HTML or perform string replacement based on the environment to determine the appropriate URL.

...

Creating PDFs using Puppeteer in the presence of `link` tags

Answer №1

Similar questions

Issues with the disappearance of elements when using the Toggle() function

Spinning an SVG circle using a group element

Enhance Your Images with Hovering Icons

The 'next-session' function is not functioning properly when used in conjunction with 'connect-pg-simple'

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

What is the best way to display a responsive website design exclusively for certain devices?

Contrasts in Bootstrap 5.3 color schemes between development and live environments

issue with next auth not properly transferring all user data to the client

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

When the web browser page is zoomed out (Ctrl -), elements do not appear to float

Google Map with rounded corners that have a transparent design

Make the inner div within the td stretch to cover the entire height of the td

Should I use a single CSS file or separate CSS files for each page?

What is the best way to make a flex box smoothly appear on the

Determine the height of a Bootstrap 4 row based on a specific column, rather than the tallest

The size of table cells automatically adjusts when zooming in the browser

Implement the anti-flickering script for Google Optimize in a NextJS/ReactJS environment

reason behind text styling: thick 12 pixels height with line spacing of 25 pixels using "Arial" font

Incorporate new functions through the css class name "javafx"