How to split the large content and print the splitted content into multi pages to get high resolution? #3258
Description
I’m using the React app and I have this code with html2canvas & jsPDF node modules.
Can anyone tell me how can we do this without affecting the actual content?
”bi-diagram-canvas” specifies child element and innerHtml contains div and svg tags
var input = document.getElementById('bi-diagram-canvas');
var w = document.getElementById("bi-diagram-canvas").offsetWidth;
var h = document.getElementById("bi-diagram-canvas").offsetHeight;
var height = h/2
html2canvas(input)
.then((canvas) => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const imgData = canvas.toDataURL('image/png')
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+15, '', 'FAST');
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
heightLeft -= pageHeight;
}
doc.autoPrint();
doc.output('datauri');
doc.output('dataurlnewwindow');
doc.save('autoprint.pdf');
});