Puppeteer fails to apply external CSS files when generating PDF from HTML

Other Questions Puppeteer
1

I am attempting to generate a PDF from an HTML string using Puppeteer with Node.js. While inline styles within the head section are applied correctly, styles from locally linked .css files specified with an absolute path do not work. Below is my implementation:

generatePDF: async (htmlContent, outputFile) => {
     const browserInstance = await puppeteer.launch({
          headless: true
     });
     const newPage = await browserInstance.newPage();
     await newPage.setContent(htmlContent, {
          waitUntil: 'domcontentloaded'
     });
     await newPage.pdf({
          format: 'A4',
          path: outputFile,
          printBackground: true
     });
     await browserInstance.close();
}

The HTML head section contains the following:



     .container {
          padding-top: 15pt;
     }

I also attempted using a URL for the CSS file, but it did not resolve the issue.

2

Hey, i ran into a similar issue before. Sometimes, locally hosted css files can’t be accessed by puppeteer directly. Try using an HTTP server to serve your css files and link them using a URL. This should help puppeteer access them properly. Hope this works for you!