0
89
ViewshtmlToPdf issue with page breaks
I have a button that generates an html page once clicked. This is the code snippet of the onClick function
const doc = new jsdpf('p', 'mm', 'a4');
const downloadPdf = e => {
e.preventDefault();
htmlToImage
.toPng(document.getElementById('divToPrint1'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
const imgProps = doc.getImageProperties(dataUrl);
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = (imgProps.height * imgWidth) / imgProps.width;
var heightLeft = imgHeight;
var position = 10;
doc.addImage(dataUrl, 'PNG', 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position += heightLeft - imgHeight; // top padding for other pages
doc.addPage();
doc.addImage(dataUrl, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save(`sample.pdf`);
});
};the image is longer than an a4 thus new pages are generated but the issue is the image breaks just like this:
Any idea what I can do to make the page not break this way?
·
Juan Pablo Isaza
Answer question