{"_id":"@amreraky/html2pdf.js","name":"@amreraky/html2pdf.js","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amreraky/html2pdf.js","version":"1.0.0","description":"Client-side HTML-to-PDF rendering using pure JS (forked from html2pdf.js)","main":"dist/html2pdf.js","types":"./type.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/amribrahim1/html2pdf.js.git"},"keywords":["javascript","pdf-generation","html","client-side","canvas"],"author":{"name":"Amr Eraky","email":"amribrahim11@gmail.com","url":"https://amr-eraky.web.app"},"license":"MIT","bugs":{"url":"https://github.com/amribrahim1/html2pdf.js/issues"},"homepage":"https://amribrahim1.github.io/html2pdf.js/","dependencies":{"dompurify":"^3.4.5","html2canvas-pro":"^2.0.3","jspdf":"^4.2.1"},"devDependencies":{"@babel/core":"^7.29.0","@babel/preset-env":"^7.29.5","@brightspace-ui/core":"^3.253.3","@brightspace-ui/testing":"^1.45.0","@web/dev-server":"^0.4.6","babel-loader":"^10.1.1","bootstrap":"^5.3.8","core-js":"^3.49.0","json5":"^2.2.3","lit":"^3.3.3","pdfjs-dist":"^5.7.284","rimraf":"^6.1.3","sinon":"^22.0.0","vue":"^2.7.16","webpack":"^5.107.1","webpack-bundle-analyzer":"^5.3.0","webpack-cli":"^7.0.2"},"scripts":{"build":"npm run clean && webpack --env=prod","build:analyze":"npm run clean && webpack --env=prod --env=analyzer","clean":"rimraf dist","dev":"webpack --env=dev","dev:analyze":"webpack --env=dev --env=analyzer","start":"web-dev-server --open demo/ --node-resolve --watch","test":"npm run test:unit && npm run test:vdiff","test:unit":"d2l-test-runner --chrome","test:vdiff":"d2l-test-runner vdiff","test:vdiff:golden":"d2l-test-runner vdiff golden"},"gitHead":"82d20ca52586aa2ed077f6919031970751746775","_id":"@amreraky/html2pdf.js@1.0.0","_nodeVersion":"22.16.0","_npmVersion":"11.14.1","dist":{"integrity":"sha512-bzoe67vNpYXPhYGHljwYGMuPi+C+BVT8djtKaExSC9AIUf/cfYyPY+kt0e00i4O8qFZRr7xWB6heqrs4+qogbA==","shasum":"3905a3b05caf1e60afc71036d24c801e7d13d929","tarball":"https://registry.npmjs.org/@amreraky/html2pdf.js/-/html2pdf.js-1.0.0.tgz","fileCount":19,"unpackedSize":13611576,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID4QDNOhRhbdZveSRym00c4hlnasaax+CUexKBeEA7gSAiBvQljFkmXPFu7f/U/QiJsAmm8GUbQw2b9lQnCkF4ZU+Q=="}]},"_npmUser":{"name":"amreraky","email":"amribrahim11@gmail.com"},"directories":{},"maintainers":[{"name":"amreraky","email":"amribrahim11@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/html2pdf.js_1.0.0_1779697655386_0.8241564232111735"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-25T08:27:35.237Z","1.0.0":"2026-05-25T08:27:35.688Z","modified":"2026-05-25T08:27:35.866Z"},"maintainers":[{"name":"amreraky","email":"amribrahim11@gmail.com"}],"description":"Client-side HTML-to-PDF rendering using pure JS (forked from html2pdf.js)","homepage":"https://amribrahim1.github.io/html2pdf.js/","keywords":["javascript","pdf-generation","html","client-side","canvas"],"repository":{"type":"git","url":"git+ssh://git@github.com/amribrahim1/html2pdf.js.git"},"author":{"name":"Amr Eraky","email":"amribrahim11@gmail.com","url":"https://amr-eraky.web.app"},"bugs":{"url":"https://github.com/amribrahim1/html2pdf.js/issues"},"license":"MIT","readme":"This's a fork of [html2pdf.js](https://github.com/eKoopmans/html2pdf.js)\r\n- Fixes\r\n- Replace `html2canvas` with `html2canvas-pro`\r\n\r\n# html2pdf.js\r\n\r\nhtml2pdf.js converts any webpage or element into a printable PDF entirely client-side using [html2canvas-pro](https://github.com/yorickshan/html2canvas-pro) and [jsPDF](https://github.com/MrRio/jsPDF).\r\n\r\n## Table of contents\r\n\r\n- [Getting started](#getting-started)\r\n - [CDN](#cdn)\r\n - [Raw JS](#raw-js)\r\n - [NPM](#npm)\r\n - [Bower](#bower)\r\n - [Console](#console)\r\n- [Usage](#usage)\r\n - [Advanced usage](#advanced-usage)\r\n - [Workflow](#workflow)\r\n - [Worker API](#worker-api)\r\n- [Options](#options)\r\n - [Page-breaks](#page-breaks)\r\n - [Page-break settings](#page-break-settings)\r\n - [Page-break modes](#page-break-modes)\r\n - [Example usage](#example-usage)\r\n - [Image type and quality](#image-type-and-quality)\r\n- [Progress tracking](#progress-tracking)\r\n- [Dependencies](#dependencies)\r\n- [Contributing](#contributing)\r\n - [Issues](#issues)\r\n - [Tests](#tests)\r\n - [Pull requests](#pull-requests)\r\n- [Credits](#credits)\r\n- [License](#license)\r\n\r\n## Getting started\r\n\r\n#### CDN\r\n\r\nThe simplest way to use html2pdf.js is to include it as a script in your HTML by using cdnjs:\r\n\r\n```html\r\n\r\n```\r\n\r\nUsing a CDN URL will lock you to a specific version, which should ensure stability and give you control over when to change versions. cdnjs gives you access to [all past versions of html2pdf.js](https://cdnjs.com/libraries/html2pdf.js).\r\n\r\n*Note: [Read about dependencies](#dependencies) for more information about using the unbundled version `dist/html2canvas.min.js`.*\r\n\r\n#### Raw JS\r\n\r\n You may also download `dist/html2pdf.bundle.min.js` directly to your project folder and include it in your HTML with:\r\n\r\n```html\r\n\r\n```\r\n\r\n#### NPM\r\n\r\nInstall html2pdf.js and its dependencies using NPM with `npm install --save html2pdf.js` (make sure to include `.js` in the package name).\r\n\r\n*Note: You can use NPM to create your project, but html2pdf.js **will not run in Node.js**, it must be run in a browser.*\r\n\r\n#### Bower\r\n\r\nInstall html2pdf.js and its dependencies using Bower with `bower install --save html2pdf.js` (make sure to include `.js` in the package name).\r\n\r\n#### Console\r\n\r\nIf you're on a webpage that you can't modify directly and wish to use html2pdf.js to capture a screenshot, you can follow these steps:\r\n\r\n1. Open your browser's console (instructions for different browsers [here](https://webmasters.stackexchange.com/a/77337/94367)).\r\n2. Paste in this code:\r\n ```js\r\n function addScript(url) {\r\n var script = document.createElement('script');\r\n script.type = 'application/javascript';\r\n script.src = url;\r\n document.head.appendChild(script);\r\n }\r\n addScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.12.1/html2pdf.bundle.min.js');\r\n ```\r\n3. You may now execute html2pdf.js commands directly from the console. To capture a default PDF of the entire page, use `html2pdf(document.body)`.\r\n\r\n## Usage\r\n\r\nOnce installed, html2pdf.js is ready to use. The following command will generate a PDF of `#element-to-print` and prompt the user to save the result:\r\n\r\n```js\r\nvar element = document.getElementById('element-to-print');\r\nhtml2pdf(element);\r\n```\r\n\r\n### Advanced usage\r\n\r\nEvery step of html2pdf.js is configurable, using its new Promise-based API. If html2pdf.js is called without arguments, it will return a `Worker` object:\r\n\r\n```js\r\nvar worker = html2pdf(); // Or: var worker = new html2pdf.Worker;\r\n```\r\n\r\nThis worker has methods that can be chained sequentially, as each Promise resolves, and allows insertion of your own intermediate functions between steps. A prerequisite system allows you to skip over mandatory steps (like canvas creation) without any trouble:\r\n\r\n```js\r\n// This will implicitly create the canvas and PDF objects before saving.\r\nvar worker = html2pdf().from(element).save();\r\n```\r\n\r\n#### Workflow\r\n\r\nThe basic workflow of html2pdf.js tasks (enforced by the prereq system) is:\r\n\r\n```\r\n.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()\r\n```\r\n\r\n#### Worker API\r\n\r\n| Method | Arguments | Description |\r\n|--------------|--------------------|-------------|\r\n| from | src, type | Sets the source (HTML string or element) for the PDF. Optional `type` specifies other sources: `'string'`, `'element'`, `'canvas'`, or `'img'`. |\r\n| to | target | Converts the source to the specified target (`'container'`, `'canvas'`, `'img'`, or `'pdf'`). Each target also has its own `toX` method that can be called directly: `toContainer()`, `toCanvas()`, `toImg()`, and `toPdf()`. |\r\n| output | type, options, src | Routes to the appropriate `outputPdf` or `outputImg` method based on specified `src` (`'pdf'` (default) or `'img'`). |\r\n| outputPdf | type, options | Sends `type` and `options` to the jsPDF object's `output` method, and returns the result as a Promise (use `.then` to access). See the [jsPDF source code](https://rawgit.com/MrRio/jsPDF/master/docs/jspdf.js.html#line992) for more info. |\r\n| outputImg | type, options | Returns the specified data type for the image as a Promise (use `.then` to access). Supported types: `'img'`, `'datauristring'`/`'dataurlstring'`, and `'datauri'`/`'dataurl'`. |\r\n| save | filename | Saves the PDF object with the optional filename (creates user download prompt). |\r\n| set | opt | Sets the specified properties. See [Options](#options) below for more details. |\r\n| get | key, cbk | Returns the property specified in `key`, either as a Promise (use `.then` to access), or by calling `cbk` if provided. |\r\n| then | onFulfilled, onRejected | Standard Promise method, with `this` re-bound to the Worker, and with added progress-tracking (see [Progress](#progress) below). Note that `.then` returns a `Worker`, which is a subclass of Promise. |\r\n| thenCore | onFulFilled, onRejected | Standard Promise method, with `this` re-bound to the Worker (no progress-tracking). Note that `.thenCore` returns a `Worker`, which is a subclass of Promise. |\r\n| thenExternal | onFulfilled, onRejected | True Promise method. Using this 'exits' the Worker chain - you will not be able to continue chaining Worker methods after `.thenExternal`. |\r\n| catch, catchExternal | onRejected | Standard Promise method. `catchExternal` exits the Worker chain - you will not be able to continue chaining Worker methods after `.catchExternal`. |\r\n| error | msg | Throws an error in the Worker's Promise chain. |\r\n\r\nA few aliases are also provided for convenience:\r\n\r\n| Method | Alias |\r\n|-----------|-----------|\r\n| save | saveAs |\r\n| set | using |\r\n| output | export |\r\n| then | run |\r\n\r\n## Options\r\n\r\nhtml2pdf.js can be configured using an optional `opt` parameter:\r\n\r\n```js\r\nvar element = document.getElementById('element-to-print');\r\nvar opt = {\r\n margin: 1,\r\n filename: 'myfile.pdf',\r\n image: { type: 'jpeg', quality: 0.98 },\r\n html2canvas: { scale: 2 },\r\n jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }\r\n};\r\n\r\n// New Promise-based usage:\r\nhtml2pdf().set(opt).from(element).save();\r\n\r\n// Old monolithic-style usage:\r\nhtml2pdf(element, opt);\r\n```\r\n\r\nThe `opt` parameter has the following optional fields:\r\n\r\n|Name |Type |Default |Description |\r\n|------------|----------------|--------------------------------|------------------------------------------------------------------------------------------------------------|\r\n|margin |number or array |`0` |PDF margin (in jsPDF units). Can be a single number, `[vMargin, hMargin]`, or `[top, left, bottom, right]`. |\r\n|filename |string |`'file.pdf'` |The default filename of the exported PDF. |\r\n|pagebreak |object |`{mode: ['css', 'legacy']}` |Controls the pagebreak behaviour on the page. See [Page-breaks](#page-breaks) below. |\r\n|image |object |`{type: 'jpeg', quality: 0.95}` |The image type and quality used to generate the PDF. See [Image type and quality](#image-type-and-quality) below.|\r\n|enableLinks |boolean |`true` |If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. |\r\n|html2canvas |object |`{ }` |Configuration options sent directly to `html2canvas` ([see here](https://html2canvas.hertzen.com/configuration) for usage).|\r\n|jsPDF |object |`{ }` |Configuration options sent directly to `jsPDF` ([see here](http://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) for usage).|\r\n\r\n### Page-breaks\r\n\r\nhtml2pdf.js has the ability to automatically add page-breaks to clean up your document. Page-breaks can be added by CSS styles, set on individual elements using selectors, or avoided from breaking inside all elements (`avoid-all` mode).\r\n\r\nBy default, html2pdf.js will respect most CSS [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before), [`break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after), and [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside) rules, and also add page-breaks after any element with class `html2pdf__page-break` (for legacy purposes).\r\n\r\n#### Page-break settings\r\n\r\n|Setting |Type |Default |Description |\r\n|----------|----------------|--------------------|------------|\r\n|mode |string or array |`['css', 'legacy']` |The mode(s) on which to automatically add page-breaks. One or more of `'avoid-all'`, `'css'`, and `'legacy'`. |\r\n|before |string or array |`[]` |CSS selectors for which to add page-breaks before each element. Can be a specific element with an ID (`'#myID'`), all elements of a type (e.g. `'img'`), all of a class (`'.myClass'`), or even `'*'` to match every element. |\r\n|after |string or array |`[]` |Like 'before', but adds a page-break immediately after the element. |\r\n|avoid |string or array |`[]` |Like 'before', but avoids page-breaks on these elements. You can enable this feature on every element using the 'avoid-all' mode. |\r\n\r\n#### Page-break modes\r\n\r\n| Mode | Description |\r\n|-----------|-------------|\r\n| avoid-all | Automatically adds page-breaks to avoid splitting any elements across pages. |\r\n| css | Adds page-breaks according to the CSS `break-before`, `break-after`, and `break-inside` properties. Only recognizes `always/left/right` for before/after, and `avoid` for inside. |\r\n| legacy | Adds page-breaks after elements with class `html2pdf__page-break`. This feature may be removed in the future. |\r\n\r\n#### Example usage\r\n\r\n```js\r\n// Avoid page-breaks on all elements, and add one before #page2el.\r\nhtml2pdf().set({\r\n pagebreak: { mode: 'avoid-all', before: '#page2el' }\r\n});\r\n\r\n// Enable all 'modes', with no explicit elements.\r\nhtml2pdf().set({\r\n pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }\r\n});\r\n\r\n// No modes, only explicit elements.\r\nhtml2pdf().set({\r\n pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' }\r\n});\r\n```\r\n\r\n### Image type and quality\r\n\r\nYou may customize the image type and quality exported from the canvas by setting the `image` option. This must be an object with the following fields:\r\n\r\n|Name |Type |Default |Description |\r\n|------------|----------------|------------------------------|---------------------------------------------------------------------------------------------|\r\n|type |string |'jpeg' |The image type. HTMLCanvasElement only supports 'png', 'jpeg', and 'webp' (on Chrome). |\r\n|quality |number |0.95 |The image quality, from 0 to 1. This setting is only used for jpeg/webp (not png). |\r\n\r\nThese options are limited to the available settings for [HTMLCanvasElement.toDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), which ignores quality settings for 'png' images. To enable png image compression, try using the [canvas-png-compression shim](https://github.com/ShyykoSerhiy/canvas-png-compression), which should be an in-place solution to enable png compression via the `quality` option.\r\n\r\n## Progress tracking\r\n\r\nThe Worker object returned by `html2pdf()` has a built-in progress-tracking mechanism. It will be updated to allow a progress callback that will be called with each update, however it is currently a work-in-progress.\r\n\r\n## Dependencies\r\n\r\nhtml2pdf.js depends on the external packages [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF). These dependencies are automatically loaded when using NPM or the bundled package.\r\n\r\nIf using the unbundled `dist/html2pdf.min.js` (or its un-minified version), you must also include each dependency. Order is important, otherwise html2canvas will be overridden by jsPDF's own internal implementation:\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n## Contributing\r\n\r\n> [!TIP]\r\n> Working on html2pdf.js locally? Use `npm start` to host local demos on http://localhost:8000.\r\n\r\n### Issues\r\n\r\nWhen submitting an issue, please provide reproducible code that highlights the issue, preferably by creating a fork of [this template jsFiddle](https://jsfiddle.net/u6o6ne41/) (which has html2pdf.js already loaded). Remember that html2pdf.js uses [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF) as dependencies, so it's a good idea to check each of those repositories' issue trackers to see if your problem has already been addressed.\r\n\r\n#### Known issues\r\n\r\n1. **Rendering:** The rendering engine html2canvas isn't perfect (though it's pretty good!). If html2canvas isn't rendering your content correctly, I can't fix it.\r\n - You can test this with something like [this fiddle](https://jsfiddle.net/eKoopmans/z1rupL4c/), to see if there's a problem in the canvas creation itself.\r\n\r\n2. **Node cloning (CSS etc):** The way html2pdf.js clones your content before sending to html2canvas is buggy. A fix is currently being developed - try out:\r\n - direct file: Go to [html2pdf.js/bugfix/clone-nodes-BUILD](/eKoopmans/html2pdf.js/tree/bugfix/clone-nodes-BUILD) and replace the files in your project with the relevant files (e.g. `dist/html2pdf.bundle.js`)\r\n - npm: `npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD`\r\n - Related project: [Bugfix: Cloned nodes](https://github.com/eKoopmans/html2pdf.js/projects/9)\r\n\r\n3. **Resizing:** Currently, html2pdf.js resizes the root element to fit onto a PDF page (causing internal content to \"reflow\").\r\n - This is often desired behaviour, but not always.\r\n - There are plans to add alternate behaviour (e.g. \"shrink-to-page\"), but nothing that's ready to test yet.\r\n - Related project: [Feature: Single-page PDFs](https://github.com/eKoopmans/html2pdf.js/projects/1)\r\n\r\n4. **Rendered as image:** html2pdf.js renders all content into an image, then places that image into a PDF.\r\n - This means text is *not selectable or searchable*, and causes large file sizes.\r\n - This is currently unavoidable, however recent improvements in jsPDF mean that it may soon be possible to render straight into vector graphics.\r\n - Related project: [Feature: New renderer](https://github.com/eKoopmans/html2pdf.js/projects/4)\r\n\r\n5. **Promise clashes:** html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.\r\n - Related project: [Bugfix: Sandboxed promises](https://github.com/eKoopmans/html2pdf.js/projects/11)\r\n\r\n6. **Maximum size:** HTML5 canvases have a [maximum height/width](https://stackoverflow.com/a/11585939/4080966). Anything larger will fail to render.\r\n - This is a limitation of HTML5 itself, and results in large PDFs rendering completely blank in html2pdf.js.\r\n - The jsPDF canvas renderer (mentioned in Known Issue #4) may be able to fix this issue!\r\n - Related project: [Bugfix: Maximum canvas size](https://github.com/eKoopmans/html2pdf.js/projects/5)\r\n\r\n### Tests\r\n\r\nhtml2pdf.js performs automatic vdiff (visual difference) comparisons on PDFs generated from a collection of sample HTML files. Contributions of additional test cases are more than welcome - see `test/vdiff/html2pdf.vdiff.js` and `test/reference/*.html` for examples. Some changes may require adding more options to the test harness, `test/util/test-harness.js`.\r\n\r\n### Pull requests\r\n\r\nIf you want to create a new feature or bugfix, please feel free to fork and submit a pull request! Create a fork, branch off of `main`, and make changes to the `/src/` files (rather than directly to `/dist/`). You can test your changes by rebuilding with `npm run build`.\r\n\r\n## Credits\r\n\r\n[Erik Koopmans](https://github.com/eKoopmans)\r\n\r\n#### Contributors\r\n\r\n- [@WilcoBreedt](https://github.com/WilcoBreedt)\r\n- [@Ranger1230](https://github.com/Ranger1230)\r\n\r\n#### Special thanks\r\n\r\n- [Sauce Labs](https://saucelabs.com/) for unit testing.\r\n\r\n## License\r\n\r\n[The MIT License](http://opensource.org/licenses/MIT)\r\n\r\nCopyright (c) 2017-2019 Erik Koopmans <[http://www.erik-koopmans.com/](http://www.erik-koopmans.com/)>\r\n","readmeFilename":"README.md","_rev":"1-9478041d471ad77dfd74c07e406d4d9f"}