How to generate full pdf using jspdf?

Question

I'm trying to print Invoice in my application, using html2canvas along with jspdf . This is my code-

    private download(): void {

      let options = {
        pagesplit: true,
        background: '#fff',
        format: 'PNG',
        padding: 50,
        margin:{top: 10, right: 10, bottom: 100, left: 10, useFor:'page'}
      };

      const input = document.getElementById("content");

      html2canvas(input)
          .then((canvas) => {
              const pdf = new jsPDF("pt", "px", "a4");
              pdf.addHTML(input, 20, 10, options, () => {
                  pdf.save("invoice.pdf");
              });
          });

    }

The code works, but the PDF being printed is only of the viewport screenshot. Whatever view part of invoice coming in scroll sections would be printed rest won't be printed. I wanted to print the complete invoice and not the part appearing in the viewport screenshot.

What changes do I need to make. Any help would be appreciated.

Answer 1

If you are only targeting printing and not saving pdf file. You should use print media query and use browsers in built print mechanism triggers on ctrl + p on windows and cmd + p on Mac.

There are few problems with jspdf , like it will refetch all the remote images while generating PDF. That won't happen with printcss or print media query.