I need to take a pdf of a graph that is too large horizontally, and I must do it in several pages of the same pdf using jsPDF and html2canvas
I tried, but it does not work:
<script>
$(document).ready(function() {
//Generate PDF
function generatePDF() {
window.scrollTo(0, 0);
var pdf = new jsPDF('p', 'pt', [580, 630]);
html2canvas($(".page1")[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
//ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));
}
});
html2canvas($(".page2")[0], {
allowTaint: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var htmlH = $(".page2").height() + 100;
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addPage(580, htmlH);
pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
}
});
html2canvas($(".page3")[0], {
allowTaint: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var htmlH = $(".page2").height() + 100;
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addPage(580, htmlH);
pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
}
});
setTimeout(function() {
//jsPDF code to save file
pdf.save('sample.pdf');
//Generate BLOB object
var blob = pdf.output("blob");
//Getting URL of blob object
var blobURL = URL.createObjectURL(blob);
//Showing PDF generated in iFrame element
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;
//Setting download link
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = "blobURL";
},2000);
};
generatePDF();
});
</script>