Angular 13 jsPDF Html2Canvas Project: Export Multiple HTML Div Content in Different PDF Pages Using TypeScript

0Shares

On the Angular 2 framework (now Angular 13), you can use the step-by-step logic mentioned below:

  • On click execute generateAllPdf() function
  • gather all 6 id‘s from my HTML collection
  • iterate through each id and call the html2canvas function,
  • as html2canvas runs in the background to process images, I’m using await on function,
  • after the html2canvas completes its process, I’ll save the document,
  • Suppose, if I don’t use await, I’ll end up downloading an empty page.
// As All Functions in js are asynchronus, to use await i am using async here
 async generateAllPdf() {
    const doc = new jsPDF('p', 'mm', 'a4');
    const options = {
      pagesplit: true
    };
    const ids = document.querySelectorAll('[id]');
    const length = ids.length;
    for (let i = 0; i < length; i++) {
      const chart = document.getElementById(ids[i].id);
      // excute this function then exit loop
      await html2canvas(chart, { scale: 1 }).then(function (canvas) { 
        doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 50, 200, 150);
        if (i < (length - 1)) {
          doc.addPage();
        }
      });
    }
    // download the pdf with all charts
    doc.save('All_charts_' + Date.now() + '.pdf');
  }

I think the issue here is that elementTobePrinted is not what you think it is.

When you run the code:

var elementTobePrinted = angular.element(attrs.selector)

This will return you a list of every element that matches the conditions, so you said you have 6 of these elements (“It has 6 divs”).

Have you tried replacing:

html2canvas(elementTobePrinted, {
  onrendered: function (canvas) {
    var doc = new jsPDF();     
    for(var i=1;i<elementTobePrinted.length;i++) {
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
    } 
    doc.save(attrs.fileName);
}
for(var i=0; i<elementTobePrinted.length; i++){
  html2canvas(elementTobePrinted[i], {
    onrendered: function (canvas) {
      var doc = new jsPDF();     
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
      doc.save(attrs.fileName);
    }
}

The reason I suggest this is that html2Canvas wants a SINGLE element as its first parameter and your example above passes a list of elements (I think, assuming angular.element(attrs.selector) finds all 6 divs you are trying to print).

0Shares

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.