A combine usage with jsPDF and html2canvas, which translating html content to PDF file.
npm install jspdf-html2canvas> 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.
> Note: This package now uses html2canvas-pro instead of the original html2canvas for better performance and additional features.(version above v1.6.0)
```
npm i jspdf-html2canvas
`js
import html2PDF from 'jspdf-html2canvas';
html2PDF(node, options);
`
since this plugin is an umd module, you can also use by cdn with /dist/jspdf-html2canvas.min.js, just remember to include both jspdf & html2canvas-pro cdn before this plugin.
`js`
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.
` Here is some content for testing!!html
PDF for Test
`
`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-pro plugin as following. see the reference`js`
html2PDF(page, {
// ... other settings
html2canvas: {
scrollX: 0,
scrollY: -window.scrollY,
},
});
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:
` This is an page for testing 1 This is an page for testing 1 This is an page for testing 1html`
Test page 1
Test page 2
Test page 3
`js
const pages = document.getElementsByClassName('page');
btn.addEventListener('click', function(){
html2PDF(pages, {
jsPDF: {
format: 'a4',
},
imageType: 'image/jpeg',
output: './pdf/generate.pdf'
});
});
`
- type: Object`
- default:
js`
{
unit: 'pt',
format: 'a4'
}
setting for creating jsPDF's instance, please ref to JSPDF Documentation
- type: Object`
- default:
js`
{
imageTimeout: 15000,
logging: true,
useCORS: false
}
setting for html2canvas-pro configs, please ref to html2canvas-pro Documentation
- 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 url1
create image watermark in the center of each page with default image scale size , 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.
`jsWatermark, page: ${pageNumber}/${totalPageNumber}
html2PDF(page, {
watermark({ pdf, pageNumber, totalPageNumber }) {
// pdf: jsPDF instance
pdf.setTextColor('#ddd');
pdf.text(50, pdf.internal.pageSize.height - 30, );`
},
});
#### datatype: Object => custom handler or resize image watermarkratio
define image watermark with change , 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);
},
},
});
- type: Stringimage/jpeg
- allowed: , image/png, image/webpimage/jpeg
- default:
define the target imageType, now only support for jpeg, png, webp
`js`
// will be used like
let pageData = canvas.toDataURL(opts.imageType, opts.imageQuality);
- type: Number0 - 1
- allowed: 1
- default:
define the image quality transfered from canvas
- type: Object{key => number}top
- allowed key: , right, bottom, left0
- default:
define the margin of each page
- type: Booleantrue
- default:
define whether to auto resize the snapshot image to fit PDF layout size
- type: Stringjspdf-generate.pdf
- default:
define name of the output PDF file
`js`
pdf.save(opts.output);
- type: Function
`js`
function init(pdf) {
pdf.setFont('Myfont');
pdf.setFontSize(10);
}
define some init for jspdf initiating before printing
- 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.
`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);
}
}
if you want more custom & widing solutions, you can use this npm package
html2pdf: https://www.npmjs.com/package/html2pdf.js