{"id":15644,"library":"html2pdf.js","title":"Client-Side HTML to PDF Conversion","description":"html2pdf.js is a JavaScript library designed for client-side conversion of HTML elements or entire webpages into printable PDF documents. It leverages `html2canvas` for rendering HTML to a canvas and `jsPDF` for generating the PDF output. The current stable version is 0.14.0, released in January 2026. This library is strictly browser-based and does not run in Node.js environments. It offers a promise-based API for advanced workflow customization, allowing developers to chain operations and insert custom functions between steps of the conversion process. Key differentiators include its entirely client-side operation, eliminating server-side rendering, and its modular, configurable workflow that provides fine-grained control over the PDF generation process, including page-break handling, image quality, and progress tracking.","status":"active","version":"0.14.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/eKoopmans/html2pdf.js","tags":["javascript","pdf-generation","html","client-side","canvas","typescript"],"install":[{"cmd":"npm install html2pdf.js","lang":"bash","label":"npm"},{"cmd":"yarn add html2pdf.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add html2pdf.js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for rendering HTML elements to canvas before PDF conversion.","package":"html2canvas"},{"reason":"Core dependency for generating the PDF document from the rendered canvas.","package":"jspdf"}],"imports":[{"note":"The primary API is a callable default export. CommonJS 'require' is not supported as the library is browser-only.","wrong":"const html2pdf = require('html2pdf.js');","symbol":"html2pdf","correct":"import html2pdf from 'html2pdf.js';"},{"note":"The Worker API for advanced usage is accessed as a property of the default export, or via html2pdf() called without arguments. It is not a named export itself.","symbol":"html2pdf.Worker","correct":"import html2pdf from 'html2pdf.js';\nconst worker = new html2pdf.Worker();"},{"note":"When included via a CDN script tag, `html2pdf` is exposed as a global variable. Direct ES Module imports from CDN URLs (without a build step) are generally not supported for this bundled format.","wrong":"import html2pdf from 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.14.0/html2pdf.bundle.min.js';","symbol":"Global `html2pdf`","correct":"\n// Then access directly: html2pdf(element);"}],"quickstart":{"code":"import html2pdf from 'html2pdf.js';\n\nconst content = document.createElement('div');\ncontent.innerHTML = `\n
Hello, PDF!
\n
This is some sample content that will be converted to a PDF document.
\n \n
\n
Item 1
\n
Item 2
\n
\n`;\n\n// Append content to body for demonstration, normally it would be an existing element\ndocument.body.appendChild(content);\n\n// Generate PDF from the content element\nhtml2pdf(content, {\n margin: 1,\n filename: 'document.pdf',\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true },\n jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }\n}).then(() => {\n console.log('PDF generation complete!');\n // Optionally remove the appended content if it was temporary\n document.body.removeChild(content);\n}).catch(error => {\n console.error('PDF generation failed:', error);\n});","lang":"typescript","description":"This quickstart demonstrates how to import `html2pdf.js` as an ES module, create an HTML element dynamically, and then use the `html2pdf` function with common options to generate and save a PDF document from that element."},"warnings":[{"fix":"Ensure the library is only executed within a web browser context. For server-side PDF generation, consider headless browser solutions (e.g., Puppeteer) or dedicated Node.js PDF libraries.","message":"html2pdf.js is designed exclusively for client-side browser environments and cannot be run in Node.js. Attempts to use it server-side will result in errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review the jspdf 4.0.0 release notes for any breaking changes if you are using advanced html2pdf.js configurations that rely on jspdf internals. Test your application thoroughly after upgrading to html2pdf.js v0.13.0 or later.","message":"Version 0.13.0 updated the underlying jspdf dependency from 3.0.3 to 4.0.0. This major version bump in jspdf may introduce breaking changes or API alterations that could affect advanced custom configurations or integrations directly interacting with jspdf objects.","severity":"breaking","affected_versions":">=0.13.0"},{"fix":"For simplicity, always use `html2pdf.bundle.min.js` unless you have a specific need to manage `html2canvas` and `jsPDF` versions independently. If using the unbundled version, ensure `html2canvas` and `jsPDF` are loaded *before* `html2pdf.min.js`.","message":"When manually including html2pdf.js via script tags, differentiate between `html2pdf.bundle.min.js` and `html2pdf.min.js`. The `bundle` version includes its dependencies (`html2canvas` and `jsPDF`), while the unbundled version requires these dependencies to be loaded separately.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Simplify complex layouts and CSS when possible for PDF conversion. Test different `html2canvas` options like `scale`, `dpi`, and `letterRendering` to find the best balance. Consider pre-rendering complex elements as images if precise fidelity is critical.","message":"The quality of PDF output can be highly dependent on the complexity of HTML and CSS. Certain CSS properties (e.g., `flexbox`, `grid`, `z-index` with complex stacking contexts) may not render perfectly due to the underlying `html2canvas` limitations in faithfully replicating browser rendering.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure the code is running in a browser. If using npm, verify your bundler (e.g., Webpack, Rollup) correctly includes `html2pdf.js`. If using CDN, confirm the script tag is present and loaded before `html2pdf` is called.","cause":"Attempting to use `html2pdf` in a Node.js environment, or the script/module was not loaded correctly in the browser.","error":"ReferenceError: html2pdf is not defined"},{"fix":"Import the default export first, then access `Worker` as a property: `import html2pdf from 'html2pdf.js'; const worker = new html2pdf.Worker();`.","cause":"Incorrectly trying to destructure `Worker` as a named import (e.g., `import { Worker } from 'html2pdf.js'`) when it's a property of the default export.","error":"TypeError: Cannot read properties of undefined (reading 'Worker')"},{"fix":"Adjust `html2canvas` options (e.g., `scale`, `useCORS`, `logging`). Ensure images are loaded and fonts are available. For complex layouts, try simplifying the HTML/CSS structure specifically for the PDF conversion target, or delay conversion until all dynamic content has settled.","cause":"Limitations of `html2canvas` in accurately replicating all browser rendering features, especially for advanced CSS or dynamic content not fully stable at the time of canvas capture.","error":"Some HTML elements or styles are missing/incorrect in the generated PDF."}],"ecosystem":"npm"}