html2canvas, combine multiple elements to make one pdf

Question

I have a webpage i'd like to render part of as a pdf, and i've got a few different parts i'd like to piece together, looks something like:

  [svg-plot1][svg-plot2]     [table of data]

  [other data table]

i am able to grab this exact picture using html2canvas and make it into a pdf using jsPDF, but it's too large and the end is getting cut off. i'd like to just grab the plots as images, and then add the rest of the tables as text. so it'd look like:

  [svg-plot1][svg-plot2]
  [table of data]
  [other table of data]

is it possible to merge multiple images combined with regular table data and make one pdf like i want to make?

this is what my current code looks like that renders one element:

var doc = new jsPDF('l','mm','a4');
html2canvas(element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');            
       doc.addImage(img,'PNG',0,0);            
       doc.save();
   }
});

Answer 1

When you are creating multiple images using html2canvas and want to merge all these image parts into one pdf, create an object of jsPDF and every time when you add new part use this object and add one blank page before adding the new image.

var doc = new jsPDF('l','mm','a4');
//create first image
html2canvas(element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');
       doc.addImage(img,'PNG',0,0);
   }
});
//create second image
html2canvas(second_element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');
       doc.addPage('l','mm','a4');
       doc.addImage(img,'PNG',0,0);
   }
});
doc.save();