Блог

У меня есть страница, на которой есть DIV и кнопка загрузки, кнопка загрузки преобразует div в pdf с помощью JSPDF и загружает его, теперь страница содержит 2 файла с одинаковым размером, но разным содержимым, и мне нужна кнопка загрузки, чтобы создать файл PDF на 2 страницы и загрузить его

в 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();
    });

});
 

первый селектор div «.отчет» и второй селектор div «#отчет-два »
может кто-нибудь дать мне руку, пожалуйста?

Вы можете попробовать с:

 page-break-before: always;
 

Пример:

 @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> 

В противном случае, если выше не поможет, попробуйте установить фиксированную высоту и ширину.
С jsPDF вам нужно иметь new jsPDF("p", "pt", "a4"); ширину 600 пикселей и высоту 840 пикселей для портретной ориентации формата А4.