Html2canvas for each export div to pdf separately

Question

I have a page, it has 6 divs with the same class name "exportpdf", I convert these divs to pdf using jspdf and html2canvas

var elementTobePrinted = angular.element(attrs.selector), iframeBody = elementTobePrinted.contents().find('div.exportpdf'); 

In html2canvas .....

 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); } 

I converted the page to canvas.its by creating the same div content for the entire pdf. I need each div content to be contained in the same pdf format with different pages.

Can anyone help me?

The problem is html2canvas:

 doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40,180, 160); 

Here I need to pass the elementTobePrinted list to addImage.

Answer 1

I think the problem here is that elementTobePrinted is not what you think.

When running the code:

 var elementTobePrinted = angular.element(attrs.selector) 

This will return you a list of each item that meets the conditions, so you said that you have 6 of these items (“It has 6 sections”).

You tried to replace:

 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); } 

WITH...

 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 why I suggest this is because html2Canvas wants the SINGLE element as the first parameter, and the above example passes a list of elements (I think assuming angular.element(attrs.selector) finds all 6 sections, which you are trying to print).