{"id":82,"date":"2025-10-11T20:19:07","date_gmt":"2025-10-11T14:49:07","guid":{"rendered":"https:\/\/peedief.com\/blog\/?p=82"},"modified":"2026-04-18T00:30:42","modified_gmt":"2026-04-17T19:00:42","slug":"developer-friendly-guide-creating-pdf-from-html-using-puppeteer-in-node-js","status":"publish","type":"post","link":"https:\/\/peedief.com\/blog\/2025\/10\/11\/developer-friendly-guide-creating-pdf-from-html-using-puppeteer-in-node-js\/","title":{"rendered":"Creating PDF from HTML using Puppeteer in Node.js"},"content":{"rendered":"\n<p>This guide will walk you through how to generate a <strong>PDF file from an HTML page<\/strong> using <strong>Puppeteer<\/strong> \u2014 a popular Node.js library for controlling headless Chrome or Chromium browsers. You\u2019ll also discover a smart way to simplify this workflow using online tools later in the guide.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde9 Prerequisites<\/h2>\n\n\n\n<p>Before starting, make sure you have the following installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js<\/strong> (v22 or later recommended)<\/li>\n\n\n\n<li><strong>npm<\/strong> or <strong>yarn<\/strong> or pnpm<\/li>\n<\/ul>\n\n\n\n<p>If you\u2019re running this on <strong>WSL<\/strong>, <strong>Linux<\/strong>, or inside a <strong>Debian-based container<\/strong>, you may need to install additional system dependencies before using Puppeteer.<\/p>\n\n\n\n<p>Run the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt-get update\nsudo apt-get install -y \\\n    fonts-liberation \\\n    libappindicator3-1 \\\n    libatk-bridge2.0-0 \\\n    libnspr4 \\\n    libnss3 \\\n    libxss1 \\\n    libx11-xcb1 \\\n    libxcomposite1 \\\n    libxdamage1 \\\n    libxrandr2 \\\n    libgbm1 \\\n    libgtk-3-0 \\\n    ca-certificates \\\n    wget \\\n    curl\n<\/code><\/pre>\n\n\n\n<p>These packages ensure that Chromium (used by Puppeteer) runs correctly in a headless environment.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2699\ufe0f Step 1: Setup a New Node.js Project<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir html-to-pdf\ncd html-to-pdf\nnpm init -y\n<\/code><\/pre>\n\n\n\n<p>This creates a new Node.js project with a default <code>package.json<\/code> file.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udce6 Step 2: Install Puppeteer<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install puppeteer\n<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udcdd Puppeteer will automatically download a compatible version of Chromium.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddf1 Step 3: Create a Script to Generate PDF<\/h2>\n\n\n\n<p>Create a new file named <code>generate-pdf.js<\/code> in your project root and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import puppeteer from 'puppeteer';\n\nasync function generatePDF() {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n\n  const htmlContent = `\n    &lt;html&gt;\n      &lt;head&gt;\n        &lt;style&gt;\n          body { font-family: Arial, sans-serif; margin: 40px; }\n          h1 { color: #4CAF50; }\n          p { font-size: 14px; }\n        &lt;\/style&gt;\n      &lt;\/head&gt;\n      &lt;body&gt;\n        &lt;h1&gt;Invoice&lt;\/h1&gt;\n        &lt;p&gt;This PDF was generated using Puppeteer.&lt;\/p&gt;\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  `;\n\n  await page.setContent(htmlContent, { waitUntil: 'networkidle0' });\n\n  await page.pdf({\n    path: 'output.pdf',\n    format: 'A4',\n    printBackground: true,\n    margin: {\n      top: '20mm',\n      bottom: '20mm',\n      left: '15mm',\n      right: '15mm'\n    }\n  });\n\n  console.log('\u2705 PDF generated successfully: output.pdf');\n  await browser.close();\n}\n\ngeneratePDF().catch(console.error);\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 Step 4: Run the Script<\/h2>\n\n\n\n<p>Run the script using Node.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node generate-pdf.js\n<\/code><\/pre>\n\n\n\n<p>After successful execution, you\u2019ll see <code>output.pdf<\/code> in your project directory.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde0 Bonus: Generate PDF from an External URL<\/h2>\n\n\n\n<p>You can also convert any webpage directly to a PDF.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import puppeteer from 'puppeteer';\n\n(async () =&gt; {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n\n  await page.goto('https:\/\/example.com', { waitUntil: 'networkidle0' });\n\n  await page.pdf({ path: 'example.pdf', format: 'A4', printBackground: true });\n\n  console.log('\u2705 PDF generated from example.com');\n\n  await browser.close();\n})();\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddf0 Optional Configurations<\/h2>\n\n\n\n<p>You can customize PDF generation with additional options:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Option<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><code>path<\/code><\/td><td>File path to save the PDF.<\/td><\/tr><tr><td><code>format<\/code><\/td><td>Paper size (e.g., <code>A4<\/code>, <code>Letter<\/code>).<\/td><\/tr><tr><td><code>printBackground<\/code><\/td><td>Whether to include background colors\/images.<\/td><\/tr><tr><td><code>landscape<\/code><\/td><td>Set to <code>true<\/code> for landscape orientation.<\/td><\/tr><tr><td><code>margin<\/code><\/td><td>Set custom margins (top, right, bottom, left).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>await page.pdf({\n  path: 'custom.pdf',\n  format: 'A4',\n  landscape: true,\n  printBackground: true,\n  margin: { top: '10mm', bottom: '10mm' }\n});\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddd1\u200d\ud83d\udcbb Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Puppeteer Download Too Large?<\/strong><\/h3>\n\n\n\n<p>If you already have Chrome installed, skip downloading Chromium:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install puppeteer-core\n<\/code><\/pre>\n\n\n\n<p>Then, connect Puppeteer to your local Chrome installation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const browser = await puppeteer.launch({\n  executablePath: '\/usr\/bin\/google-chrome', \/\/ path to your Chrome\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Running in Docker or CI\/CD?<\/strong><\/h3>\n\n\n\n<p>Add this config to run Puppeteer in restricted environments:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const browser = await puppeteer.launch({\n  headless: 'new',\n  args: &#91;'--no-sandbox', '--disable-setuid-sandbox'],\n});\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Summary<\/h2>\n\n\n\n<p>You\u2019ve now learned how to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a Node.js project<\/li>\n\n\n\n<li>Install Puppeteer<\/li>\n\n\n\n<li>Generate a PDF from HTML content or a URL<\/li>\n\n\n\n<li>Customize page settings<\/li>\n\n\n\n<li>Fix environment dependencies on Linux or containers<\/li>\n<\/ul>\n\n\n\n<p>This setup is perfect for generating <strong>invoices<\/strong>, <strong>reports<\/strong>, or <strong>certificates<\/strong> from dynamic HTML templates.<\/p>\n\n\n\n<p>If you ever need to automate PDF generation at scale without managing browsers or code execution, you can try services like <strong><a href=\"https:\/\/peedief.com\/?utm_source=blog&amp;utm_medium=internal_link&amp;utm_campaign=developer-friendly-guide-creating-pdf-from-html-using-puppeteer-in-node-js\">Peedief<\/a><\/strong> \u2014 which lets you create and render PDF templates via simple API calls. It\u2019s great for production apps that need reliability without the hassle of maintaining Puppeteer environments.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide will walk you through how to generate a PDF file from an HTML page using Puppeteer \u2014 a popular Node.js library for controlling headless Chrome or Chromium browsers. You\u2019ll also discover a smart way to simplify this workflow using online tools later in the guide. \ud83e\udde9 Prerequisites Before starting, make sure you have [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-guides"],"_links":{"self":[{"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":4,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/peedief.com\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}