jsPDF insert html from specified id into a specific pdf page

Viewed 264

I am creating a pdf using jsPDF.

The HTML

<div id="myid">HTML GOES HERE</div>

create PDF js:

genPDF(){ 
    html2canvas(document.getElementById('myid'), {
       allowTaint: true,
       useCORS: false,
       scale: 1,
    }).then((canvas) => {

    var img = canvas.toDataURL("image/png");

    var imgWidth = 210; 
    var pageHeight = 297;  
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
    var position = 10;
    var doc = new jsPDF()

    doc.setFontSize(16);
    doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);

    doc.setProperties({
      title: 'Test pdf'
    });

    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position += heightLeft - imgHeight;

      doc.setFontSize(22);
      doc.text(20, 20, 'This is a title');

      doc.addPage();
      doc.addImage(img, 'PNG', 10, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    doc.save( 'mypdf.pdf');
 
   });
}

Is it possible to call different element to go into a particular page when required?

For example I want to create a cover page for page 1 and I'd like to have it in another element.

So is it possible to have something for page 1 like:

<div id="mycoverpageId">My Cover page html here</div>

How can I do this?

0 Answers
Related