How do I fit the entire content in one page when printing it to PDF?

Question

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

Answer 1

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.