Tengo una página donde hay DIV y un botón de descarga, el botón de descarga convierte el div a pdf mediante JSPDF y lo descarga, ahora la página contiene 2 DIV con el mismo tamaño pero diferente contenido, y necesito el botón de descarga para crear 2 páginas en PDF archivarlo y descargarlo
el 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(); }); });el primer selector div '.report', y el segundo selector div '#report-two' ¿alguien puede ayudarme, por favor?
Puedes probar con:
page-break-before: always;Ejemplo:
@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> De lo contrario, si lo anterior no ayuda, intente configurar la altura y el ancho fijos. Con JsPDF necesita tener un new jsPDF("p", "pt", "a4"); y 600 px de ancho y 840 px de alto para la orientación vertical A4.