JSPDF将两个DIV转换为两页的PDF答案

【问题标题】：JSPDF convert two DIVs to PDF of two pagesJSPDF将两个DIV转换为两页的PDF
【发布时间】：2021-12-15 15:08:07
【问题描述】：

我的页面有DIV和下载按钮，下载按钮通过JSPDF将div转换为pdf并下载，现在页面包含2个大小相同但内容不同的DIV，我需要下载按钮来创建2页PDF文件并下载

$('#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 选择器“.report”，第二个 div 选择器“#report-two” 谁能帮我一把？

【问题讨论】：

标签： javascript jspdf html2canvas

【解决方案1】：

你可以试试：

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"); 和 600px 宽和 840px 高的 A4 纵向。

【讨论】：