### This is a one to one fork of `jspdf-html2canvas`, but this uses `html2canvas-pro` instead of the unmaintained `html2canvas` to add support for new tailwind versions + many more...

Downloads Version License

# jspdf-html2canvas-pro A combine usage with jsPDF & html2canvas, which translating html content to PDF file. Written in Typescript. > html2PDF function will auto fit the target dom width into PDF size. So no need to worry about the overflow part. And if the content height is over 1 pdf, it'll auto seperate it into another pdf page. ## Install ``` npm i jspdf-html2canvas-pro ``` ```js import html2PDF from 'jspdf-html2canvas-pro'; html2PDF(node, options); ``` since this plugin is an umd module, you can also use by cdn with `/dist/jspdf-html2canvas-pro.min.js`, just remember to include both `jspdf` & `html2canvas` cdn before this plugin. ```js ``` ## html2PDF([Node, NodeList], options) convert specific DOM target to print it into PDF file. Automatically, it'll save the file, or you can define the `success` callback to do with the jsPDF instance. ```html

PDF for Test

Here is some content for testing!!

``` ```js let btn = document.getElementById('btn'); let page = document.getElementById('page'); btn.addEventListener('click', function(){ html2PDF(page, { jsPDF: { format: 'a4', }, imageType: 'image/jpeg', output: './pdf/generate.pdf' }); }); ``` you can easily `await` the method to wait for pdf generated. ```js async function printPdf() { const pdf = await html2PDF(page, { // ... }); // do something with pdf(jsPdf instance) } ``` > If there's some white space on top of the outputed PDF file, it might caused by the scroll problem, just add some settings for `html2canvas` plugin as following. [see the reference](https://stackoverflow.com/questions/57936607/why-there-is-a-white-space-on-the-top-on-html2canvas) ```js html2PDF(page, { // ... other settings html2canvas: { scrollX: 0, scrollY: -window.scrollY, }, }); ``` ## Custom multiple page supported There might be some situation you want to print DOM seperately, just easily give the nodeList with `length` in it, will adjust every nodes inside seperately into a new page in the same PDF output. for example: ```html

Test page 1

This is an page for testing 1

Test page 2

This is an page for testing 1

Test page 3

This is an page for testing 1

``` ```js const pages = document.getElementsByClassName('page'); btn.addEventListener('click', function(){ html2PDF(pages, { jsPDF: { format: 'a4', }, imageType: 'image/jpeg', output: './pdf/generate.pdf' }); }); ``` ## Options ### - jsPDF - type: `Object` - default: ```js { unit: 'pt', format: 'a4' } ``` setting for creating jsPDF's instance, please ref to [JSPDF Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/) ### - html2canvas - type: `Object` - default: ```js { imageTimeout: 15000, logging: true, useCORS: false } ``` setting for `html2canvas` configs, please ref to [html2canvas Documentation](https://html2canvas.hertzen.com/documentation) ### - watermark - type: `String` | `Function` | `Object` - optional setting for watermark in pdf, will add watermark into each pages of your outputed pdf file. each data type has different usage as following: #### datatype: `String` => image url create image watermark in the center of each page with default image scale size `1`, please use `.png` file for watermark. ```js html2PDF(page, { watermark: './test.png', }); ``` #### datatype: `Function` => custom handler define custom handler to do things for each page of pdf file. ```js html2PDF(page, { watermark({ pdf, pageNumber, totalPageNumber }) { // pdf: jsPDF instance pdf.setTextColor('#ddd'); pdf.text(50, pdf.internal.pageSize.height - 30, `Watermark, page: ${pageNumber}/${totalPageNumber}`); }, }); ``` #### datatype: `Object` => custom handler or resize image watermark define image watermark with change `ratio`, or use custom `handler` to do with the image position. ```js html2PDF(page, { watermark: { src: './test.png', scale: 0.5 }, }); // or html2PDF(page, { watermark: { src: './test.png', handler({ pdf, imgNode, pageNumber, totalPageNumber }) { const props = pdf.getImageProperties(imgNode); // do something... pdf.addImage(imgNode, 'PNG', 0, 0, 40, 40); }, }, }); ``` ### - imageType - type: `String` - allowed: `image/jpeg`, `image/png`, `image/webp` - default: `image/jpeg` define the target imageType, now only support for jpeg, png, webp ```js // will be used like let pageData = canvas.toDataURL(opts.imageType, opts.imageQuality); ``` ### - imageQuality - type: `Number` - allowed: `0 - 1` - default: `1` define the image quality transfered from canvas ### - margin - type: `Object{key => number}` - allowed key: `top`, `right`, `bottom`, `left` - default: `0` define the margin of each page ### - autoResize - type: `Boolean` - default: `true` define whether to auto resize the snapshot image to fit PDF layout size ### - output - type: `String` - default: `jspdf-generate.pdf` define name of the output PDF file ```js pdf.save(opts.output); ``` ### - init - type: `Function` ```js function init(pdf) { pdf.setFont('Myfont'); pdf.setFontSize(10); } ``` define some init for jspdf initiating before printing ### - success - type: `Function` - default: ```js function success(pdf) { pdf.save(this.output); } ``` callback function to do after all code, default will save the file with the output name setting. ## Defaults options ```js const defaultOptions = { jsPDF: { unit: 'pt', format: 'a4', }, html2canvas: { imageTimeout: 15000, logging: true, useCORS: false, }, imageType: 'image/jpeg', imageQuality: 1, margin: { top: 0, right: 0, bottom: 0, left: 0, }, watermark: undefined, autoResize: true, output: 'jspdf-generate.pdf', init: function() {}, success: function(pdf) { pdf.save(this.output); } } ``` ## Recommend if you want more custom & widing solutions, you can use this npm package html2pdf: https://www.npmjs.com/package/html2pdf.js