I am using jspdf and html2canvas. Printing the component would make the footer go to the next page.
How can I set this where it will dynamically resize to fit it on one page when I print it to pdf? Is this possible where the entire component will fit in one page only?
const generatePdf = () => {
var doc = new jsPDF("portrait", "pt", "a4");
doc.html(document.querySelector("#pdf"), {
html2canvas: {
scale: 0.5
},
callback: function (pdf) {
pdf.save(`sample.pdf`);
}
});
};
Could you try this, may not be the best solution. Also, note that this will render the HTML as an image and not as text/vector graphics.
const quality = 1 // Higher Quality results in better output
html2canvas(document.querySelector('#html'),
{ scale: quality }
).then(canvas => {
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298); // Play around with the metrics here to your liking
pdf.save(filename);
});
Follow this discussion on GitHub for a better understanding.