jh

jspdf-html2canvas

A combine usage with jsPDF & html2canvas, which translating html content to PDF file.

Showing:

Popularity

Downloads/wk

1.9K

GitHub Stars

22

Maintenance

Last Commit

9mos ago

Contributors

3

Package

Dependencies

2

Size (min+gzip)

152.9KB

License

ISC

Type Definitions

Tree-Shakeable

Yes?

Categories

Reviews

Average Rating

5.0/51
Read All Reviews
constantine-d

Top Feedback

1Great Documentation
1Easy to Use

Readme

Downloads Version License

jsPDF-html2canvas

A combine usage with jsPDF & html2canvas, which translating html content to PDF file.

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
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 cdn before this plugin.

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf-html2canvas@latest/dist/jspdf-html2canvas.min.js"></script>

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.

<!-- default a4's width is 595.28px -->
<div id="page" style="width: 595.28px;color: black;background: white;">
  <h3>PDF for Test</h3>
  <p>Here is some content for testing!!</p>
</div>

<button id="btn">Generate</button>
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.

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

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:

<div id="page" style="width: 595.28px;color: black;background: white;">
  <div class="page page-1">
    <h3>Test page 1</h3>
    <p>This is an page for testing 1</p>
  </div>
  <div class="page page-2">
    <h3>Test page 2</h3>
    <p>This is an page for testing 1</p>
  </div>
  <div class="page page-3">
    <h3>Test page 3</h3>
    <p>This is an page for testing 1</p>
  </div>
</div>
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:
    {
      unit: 'px',
      format: 'a4'
    }
    

setting for creating jsPDF's instance, please ref to JSPDF Documentation

- html2canvas

  • type: Object
  • default:
    {
      imageTimeout: 15000,
      logging: true,
      useCORS: false
    }
    

setting for html2canvas configs, please ref to html2canvas 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.

html2PDF(page, {
  watermark: './test.png',
});

datatype: Function => custom handler

define custom handler to do things for each page of pdf file.

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.

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

// 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

- output

  • type: String
  • default: jspdf-generate.pdf

define name of the output PDF file

pdf.save(opts.output);

- init

  • type: Function
function init(pdf) {
  pdf.setFont('Myfont');
  pdf.setFontSize(10);
}

define some init for jspdf initiating before printing

- success

  • type: Function
  • default:
    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

const defaultOptions = {
  jsPDF: {
    unit: 'px',
    format: 'a4',
  },
  html2canvas: {
    imageTimeout: 15000,
    logging: true,
    useCORS: false,
  },
  imageType: 'image/jpeg',
  imageQuality: 1,
  margin: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
  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

Rate & Review

Great Documentation1
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
consntantine-dGreece5 Ratings1 Review
4 months ago
Great Documentation
Easy to Use

Great library. I just could not manage to make the watermark work as it should. In my case, the watermark is always on top of the actual content.


0