jspdfhtml2canvashtml2pdf

Multipage pdf with html2Canvas


I am using react-typescript and I have successfully created a PDF file from an html page with the help of this ref Generating a PDF file from React Components

But if we want to create a PDF with multiple pages then what to do? with a4 size page with appropriate margins at all sides and in each new page that margin should be applied.

And here is my code.

private printDocument() {
        const input = document.getElementById("pdf");

        html2canvas(input)
            .then((canvas) => {
                const pdf = new jsPDF("p", "px", "a4");
                pdf.addHTML(input, 0, 0, {
                    pagesplit: true,
                    background: "#ffffff",
                }, () => {
                    pdf.save("download.pdf");
                });
            });
    }

please help me its argent. Thank you in advance


Solution

  • In 2024, during one of my project development I found the solution aka library which is very very good in handling these things.

    The combination of react-pdf and @react-pdf/renderer can be very useful in multipage pdfs. @react-pdf/renderer supports basic flexbox properties as well so we can do css for pdf as well!