I am creating a pdf using jsPDF in angular.
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?