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?
You can try with:
page-break-before: always;
Example:
@media print {
.new-page {
page-break-before: always;
}
button {
display:none;
}
}<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 new jsPDF("p", "pt", "a4"); and 600px width and 840px height for A4 portrait orientation.