How to split the large content and print the splitted content into multi pages to get high resolution?

[jyothiyellapu8]

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');
});

[HackbrettXXX]

I would recommend using the jsPDF html function. This has also the advantage that the result is a vector graphic with real text and not bitmap images. #2977 improved the autopaging functionality and will be released this week.

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.