Convert HTML to PDF Using Puppeteer

Method 1: Generating PDF from a web page using URL

One practical use case of Puppeteer is generating a PDF directly from a web page using its URL. This method is particularly useful when you want to capture the content of a webpage and save it as a PDF without having to render the page in a headless browser. This method advantages are:

• Direct Extraction: Allows direct extraction of the PDF from the specified URL without rendering the page in a browser.
• Time Efficiency: Can be more time-efficient compared to loading the page in a headless browser, especially for scenarios where rendering is not necessary.
• Ideal for Static Pages: Suitable for static web pages or when dynamic content rendering is not a requirement.

Here’s a simple code example:

const puppeteer = require("puppeteer");

async function downloadPdfFromUrl(url, outputPath) {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();

  // Navigate to the specified URL
  await page.goto(url, { waitUntil: "networkidle0" });

  // Generate PDF from the page content
  await page.pdf({ path: outputPath, format: "A4" });

  // Close the browser
  await browser.close();
}

const targetUrl = "https://www.webshare.io/blog/what-are-datacenter-proxies";
const outputFile = "downloaded_page.pdf";

downloadPdfFromUrl(targetUrl, outputFile)
  .then(() => console.log(`PDF downloaded successfully at: ${outputFile}`))
  .catch((error) => console.error("Error:", error));

Here's what the code does:

• Navigate to URL: The page.goto() function is used to navigate to the specified URL. The { waitUntil: 'networkidle0' } option ensures the page is considered loaded when there are no network connections for at least 500 milliseconds.
• Generate PDF: The page.pdf() function is used to generate a PDF from the page content. The PDF is saved at the specified output path outputPath in A4 format.
• Close the Browser: The browser.close() function is called to close the Puppeteer browser instance.

You can run the code and see the result as shown below:

Here's the generated PDF file:

Common use case of this method is invoice URL generation to PDF. Invoices are crucial documents in business transactions, and converting them to PDFs is a common requirement for archival, sharing, or printing purposes. The PDF format ensures that the invoice maintains a consistent appearance across different devices and platforms.

Suppose you have an invoice hosted on a website like Stripe, and you want to generate a PDF from its URL using Puppeteer. Below is a code example demonstrating this scenario:

const puppeteer = require("puppeteer");

async function generateInvoicePdfFromUrl(invoiceUrl, outputPath) {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();

  // Navigate to the specified invoice URL
  await page.goto(invoiceUrl, { waitUntil: "networkidle0" });

  // Generate PDF from the invoice page content
  await page.pdf({ path: outputPath, format: "A4" });

  // Close the browser
  await browser.close();
}

const invoiceUrl = "https://b.stripecdn.com/docs-statics-srv/assets/hosted-invoice-page.46a27a6f0e9fee330cde9bdb884dce68.png";
const outputFile = "invoice.pdf";

generateInvoicePdfFromUrl(invoiceUrl, outputFile)
  .then(() =>
    console.log(`Invoice PDF generated successfully at: ${outputFile}`)
  )
  .catch((error) => console.error("Error:", error));

Here’s the generated PDF:

Method 2: Generating PDF from an HTML file

In this method, Puppeteer is employed to generate a PDF directly from an HTML file. This is beneficial when you have a pre-existing HTML file that you want to convert into a PDF without navigating to a live web page. Puppeteer can seamlessly render the HTML file and generate a PDF based on its content. This method advantages are:

• Offline Processing: Ideal for scenarios where the HTML content is available locally, eliminating the need to fetch content from a live URL.
• Batch Processing: Suitable for batch processing multiple HTML files to generate corresponding PDFs.
• Custom Styling: Allows customization of the PDF output based on the styling and structure of the provided HTML file.

Suppose you have an HTML file named template.html with the below provided content.

<!DOCTYPE html>
<html>
<head>
    <title>HTML content</title>
</head>
<body>
    <h1>Sample</h1>
    <div>
        <p>
        </p><ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Integer interdum felis nec orci mattis, ac dignissim mauris commodo.</li>
        </ul>
        <p></p>
        <p>
        </p><ul>
            <li>In et augue non turpis faucibus tincidunt a et lectus.</li>
            <li>Nulla congue nisi vel diam hendrerit, at pulvinar massa aliquam.</li>
        </ul>
        <p></p>
    </div>

    <h1>Ipsum Paragraphs</h1>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna turpis. Donec a tellus in mi pharetra volutpat at et nulla. Aenean porttitor fringilla diam et pretium. Fusce id velit mauris. Aenean ultrices orci dolor, sed tristique eros molestie eget. Fusce non ultrices odio. Sed nisi ex, porttitor non fermentum eu, rutrum quis mauris. Morbi scelerisque sollicitudin semper. Nunc vitae pharetra tortor, vel gravida ante. Integer euismod velit nisi, quis sollicitudin neque dictum nec. Morbi magna nulla, scelerisque a malesuada at, scelerisque at quam. Aliquam sit amet lorem congue, pellentesque metus non, aliquet purus. Integer a metus augue. Ut venenatis cursus ante, sed venenatis quam consequat id. Fusce rhoncus elementum felis, eu volutpat magna lacinia id. Proin ac sagittis nulla, a molestie turpis.
        </p>
    </div>
</body>

</html>

Here’s a code example that uses Puppeteer to convert this HTML file into a PDF:

const puppeteer = require("puppeteer");
const path = require("path");

async function downloadPdfFromHtmlFile(htmlFilePath, outputPath) {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();

  // Load HTML content from the file
  const absolutePath = path.resolve(htmlFilePath);
  await page.goto(`file://${absolutePath}`, { waitUntil: "networkidle0" });

  // Generate PDF from the page content
  await page.pdf({ path: outputPath, format: "A4" });

  // Close the browser
  await browser.close();
}
const inputHtmlFile = "template.html";
const outputFile = "downloaded_from_html.pdf";

downloadPdfFromHtmlFile(inputHtmlFile, outputFile)
  .then(() => console.log(`PDF downloaded successfully at: ${outputFile}`))
  .catch((error) => console.error("Error:", error));

Here's what the code does:

• ‍Load HTML from File: The page.goto() function is used to load HTML content from the specified local file.
• ‍Generate PDF: The page.pdf() function is used to generate a PDF from the loaded HTML content. The PDF is saved at the specified output path in A4 format.
• ‍Close the Browser: The browser.close() function is called to close the Puppeteer browser instance.

Output

You can run the code and see the output:

Here's the sample PDF output from our HTML:

Common use case of this method is report generation from HTML to PDF. In case you do not have an HTML file ready, Excel table format is often used for reporting. You can use a tool like Table Convert to generate an HTML from your Excel table. When you have it ready, just replace the <html> content with your generated table HTML code. Alternatively, instead of pasting HTML directly in the code, you can setup a placeholder HTML file and reference to it, using previous code examples.

const puppeteer = require("puppeteer");

async function generateReportPdf() {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();

  // Load HTML content for the report
  const reportHtml = `
   
<html>
<head>
  <title>Sample Report</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    h1 {
      color: #333;
    }
    p {
      color: #555;
      margin-bottom: 10px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <h1>Monthly Sales Report</h1>

  <p>Date: January 10, 2024</p>

  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Units Sold</th>
        <th>Revenue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Product A</td>
        <td>150</td>
        <td>$5,000</td>
      </tr>
      <tr>
        <td>Product B</td>
        <td>120</td>
        <td>$4,000</td>
      </tr>
      <tr>
        <td>Product C</td>
        <td>200</td>
        <td>$6,500</td>
      </tr>
    </tbody>
  </table>

  <p>Total Revenue: $15,500</p>

</body>
</html>

  `;
  await page.setContent(reportHtml);

  // Generate PDF for the report
  await page.pdf({ path: "report.pdf", format: "A4" });

  await browser.close();
}

// Call the function to generate a report PDF
generateReportPdf();

Here’s the generated report:

CSS styling considerations

Styling plays a crucial role in ensuring that the PDF output looks polished and meets specific design requirements. Here are some considerations:

While Puppeteer supports both inline styles and external stylesheets, inline styles are often more straightforward for PDF generation.

Consider embedding styles directly within the HTML using the <style> tag for simplicity.

<style>
 body {
 font-family: 'Arial', sans-serif;
 }
 h1 {
 color: #333;
 }
 /* ... (additional styles) ... */
</style>

For more advanced styling techniques, consider exploring the following resources:

• CSS Tricks: CSS Tricks is a comprehensive resource with articles and guides on various CSS techniques. You can explore their tips on responsive design, flexbox and grid layout.
• MDN Web Docs - CSS: The MDN Web Docs is an excellent reference for CSS properties and values. Dive into their CSS documentation for in-depth information.
• Google Fonts: Google Fonts offers a wide selection of free and open-source fonts. Choose fonts that are not only pleasing but also supported in PDF rendering.