Gathering detailed insights and metrics for jspdf-html2canvas
Gathering detailed insights and metrics for jspdf-html2canvas
Gathering detailed insights and metrics for jspdf-html2canvas
Gathering detailed insights and metrics for jspdf-html2canvas
jspdf-pro
jspdf+html2canvas生成pdf并解决过长导致的canvas空白问题并支持自动分页、跨页处理
jspdf-html2canvas-pro
A combine usage with jsPDF and html2canvas-pro, which translating html content to PDF file.
jspdf-html2canvas-fork
A combine usage with jsPDF and html2canvas, which translating html content to PDF file.
jspdf-with-html2canvas
PDF Document creation from JavaScript
A combine usage with jsPDF & html2canvas, which translating html content to PDF file.
npm install jspdf-html2canvas
Typescript
Module System
Node Version
NPM Version
TypeScript (67.55%)
HTML (26.96%)
JavaScript (5.49%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
82 Stars
65 Commits
14 Forks
3 Watchers
5 Branches
1 Contributors
Updated on May 26, 2025
Latest Version
1.5.2
Package Id
jspdf-html2canvas@1.5.2
Unpacked Size
17.44 kB
Size
6.95 kB
File Count
16
NPM Version
8.19.4
Node Version
16.20.2
Published on
Feb 27, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
5
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.
npm i jspdf-html2canvas
1import html2PDF from 'jspdf-html2canvas'; 2 3html2PDF(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
cdn before this plugin.
1<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script> 2<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> 3<script src="https://cdn.jsdelivr.net/npm/jspdf-html2canvas@latest/dist/jspdf-html2canvas.min.js"></script>
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.
1<!-- default a4's width is 595.28px --> 2<div id="page" style="width: 595.28px;color: black;background: white;"> 3 <h3>PDF for Test</h3> 4 <p>Here is some content for testing!!</p> 5</div> 6 7<button id="btn">Generate</button>
1let btn = document.getElementById('btn');
2let page = document.getElementById('page');
3
4btn.addEventListener('click', function(){
5 html2PDF(page, {
6 jsPDF: {
7 format: 'a4',
8 },
9 imageType: 'image/jpeg',
10 output: './pdf/generate.pdf'
11 });
12});
you can easily await
the method to wait for pdf generated.
1async function printPdf() { 2 const pdf = await html2PDF(page, { 3 // ... 4 }); 5 // do something with pdf(jsPdf instance) 6}
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
1html2PDF(page, {
2 // ... other settings
3 html2canvas: {
4 scrollX: 0,
5 scrollY: -window.scrollY,
6 },
7});
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:
1<div id="page" style="width: 595.28px;color: black;background: white;"> 2 <div class="page page-1"> 3 <h3>Test page 1</h3> 4 <p>This is an page for testing 1</p> 5 </div> 6 <div class="page page-2"> 7 <h3>Test page 2</h3> 8 <p>This is an page for testing 1</p> 9 </div> 10 <div class="page page-3"> 11 <h3>Test page 3</h3> 12 <p>This is an page for testing 1</p> 13 </div> 14</div>
1const pages = document.getElementsByClassName('page');
2
3btn.addEventListener('click', function(){
4 html2PDF(pages, {
5 jsPDF: {
6 format: 'a4',
7 },
8 imageType: 'image/jpeg',
9 output: './pdf/generate.pdf'
10 });
11});
Object
1{ 2 unit: 'pt', 3 format: 'a4' 4}
setting for creating jsPDF's instance, please ref to JSPDF Documentation
Object
1{ 2 imageTimeout: 15000, 3 logging: true, 4 useCORS: false 5}
setting for html2canvas
configs, please ref to html2canvas Documentation
String
| Function
| Object
setting for watermark in pdf, will add watermark into each pages of your outputed pdf file.
each data type has different usage as following:
String
=> image urlcreate image watermark in the center of each page with default image scale size 1
, please use .png
file for watermark.
1html2PDF(page, {
2 watermark: './test.png',
3});
Function
=> custom handlerdefine custom handler to do things for each page of pdf file.
1html2PDF(page, { 2 watermark({ pdf, pageNumber, totalPageNumber }) { 3 // pdf: jsPDF instance 4 pdf.setTextColor('#ddd'); 5 pdf.text(50, pdf.internal.pageSize.height - 30, `Watermark, page: ${pageNumber}/${totalPageNumber}`); 6 }, 7});
Object
=> custom handler or resize image watermarkdefine image watermark with change ratio
, or use custom handler
to do with the image position.
1html2PDF(page, {
2 watermark: {
3 src: './test.png',
4 scale: 0.5
5 },
6});
7// or
8html2PDF(page, {
9 watermark: {
10 src: './test.png',
11 handler({ pdf, imgNode, pageNumber, totalPageNumber }) {
12 const props = pdf.getImageProperties(imgNode);
13 // do something...
14 pdf.addImage(imgNode, 'PNG', 0, 0, 40, 40);
15 },
16 },
17});
String
image/jpeg
, image/png
, image/webp
image/jpeg
define the target imageType, now only support for jpeg, png, webp
1// will be used like
2let pageData = canvas.toDataURL(opts.imageType, opts.imageQuality);
Number
0 - 1
1
define the image quality transfered from canvas
Object{key => number}
top
, right
, bottom
, left
0
define the margin of each page
Boolean
true
define whether to auto resize the snapshot image to fit PDF layout size
String
jspdf-generate.pdf
define name of the output PDF file
1pdf.save(opts.output);
Function
1function init(pdf) { 2 pdf.setFont('Myfont'); 3 pdf.setFontSize(10); 4}
define some init for jspdf initiating before printing
Function
1function success(pdf) { 2 pdf.save(this.output); 3}
callback function to do after all code, default will save the file with the output name setting.
1const defaultOptions = { 2 jsPDF: { 3 unit: 'pt', 4 format: 'a4', 5 }, 6 html2canvas: { 7 imageTimeout: 15000, 8 logging: true, 9 useCORS: false, 10 }, 11 imageType: 'image/jpeg', 12 imageQuality: 1, 13 margin: { 14 top: 0, 15 right: 0, 16 bottom: 0, 17 left: 0, 18 }, 19 watermark: undefined, 20 autoResize: true, 21 output: 'jspdf-generate.pdf', 22 init: function() {}, 23 success: function(pdf) { 24 pdf.save(this.output); 25 } 26}
if you want more custom & widing solutions, you can use this npm package
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
11 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More