JSPDF convert two DIVs to PDF of two pages

Question

I have page where there is DIV and download button, the download button convert the div to pdf by JSPDF and downloads it, now the page contains 2 DIVs with the same size but different content, and I need the download button to create 2 pages PDF file and download it

the JS

$('#print').click(function (e) { 
    e.preventDefault();
    let HTML_Width = $(".report").width();
    let HTML_Height = $(".report").height();
    let top_left_margin = 1;
    let PDF_Width = HTML_Width + (top_left_margin * 2);
    let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    let canvas_image_width = HTML_Width;
    let canvas_image_height = HTML_Height;
    let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
    html2canvas($(".report")[0]).then(function (canvas) {
        let imgData = canvas.toDataURL("image/jpeg", 1.0);
        let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, 
canvas_image_height, 'FAST');
        for (let i = 1; i <= totalPDFPages; i++) {
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 
4), canvas_image_width, canvas_image_height);
        }
        pdf.save("Report.pdf");
        $(".html-content").hide();
    });

});

the first div selector '.report', and the second div selector '#report-two' can anyone give me hand please?

Answer 1

You can try with:

page-break-before: always;

Example:

 @media print { .new-page { page-break-before: always; } }

 <div> <h1>1 Page</h1> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro unde voluptas pariatur, sapiente voluptatem dignissimos ratione provident tenetur exercitationem itaque suscipit incidunt excepturi iusto consectetur odit reiciendis sunt quibusdam. Vitae? </p> </div> <div class="new-page"> <h1>2 Page</h1> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro unde voluptas pariatur, sapiente voluptatem dignissimos ratione provident tenetur exercitationem itaque suscipit incidunt excepturi iusto consectetur odit reiciendis sunt quibusdam. Vitae? </p> </div> <button onClick="window.print()">Print pages</button>

Otherwise if above not help try setting fixed height & width. With JsPDF you need to have 600px width and 840px height for A4 portrait orientation.