内容增加时自动分页jspdf

Question

我正在尝试创建一个在内容增加时自动分页的 pdf。这是我的示例代码。任何帮助将不胜感激:)

HTML代码

<div *ngFor="let data of data">
  <button click = "previewPdf(data)"> Preview </button>
</div>

Javascript

previewPdf(data) {
  var doc = new jsPDF();
  let bodyContent = doc.splitTextToSize(data.body, 250);
  let lineheight = 6;
  let offsety = 5;

  this.data.forEach(function(i) {
  doc.setFontSize(20);
  doc.text(10,10 + lineheight * 0 + offsety, bodyContent);
  doc.output("dataurlnewwindow");
});

}

JSON

data[{
  "body": "A very long letter content...";
}];

编辑：我已经尝试了下面的示例代码，它给了我 2 页，最后一页是空白的

previewPdf(data) {
    var doc = new jsPDF('p', 'mm', 'a4');
    let pageHeight = doc.internal.pageSize.getHeight();
    let bodyContent = doc.splitTextToSize(data.body, 250);
    let lineheight = 6;
    let offsetY = 5;


    doc.text(10, 10, bodyContent);
    // Before adding new content
    let y = 840; // Height position of new content
    if (y >= pageHeight) {
      doc.addPage();
      y = 0 // Restart height position
    }


    // this.data.forEach(function(i) {
    //   doc.setFontSize(20);
    //   
    // });
    doc.output("dataurlnewwindow");
  }

Answer 1

您可以使用 addHTML 使用 pagesplit 参数

编辑：

还有另一个肮脏的技巧，您可以在其中计算添加内容之前剩余的页面高度

doc = new jsPdf();

pageHeight= pdf.internal.pageSize.height; //get total page height

然后在添加内容时检查高度条件，如下所示

pdf.text(x, y, "value");

if (y>=pageHeight)
{
pdf.addPage();
}

Answer 2

工作解决方案

  previewPdf(data) {
    var doc = new jsPDF();

    var bodyContent = doc.splitTextToSize(data.body, 250);
    var pageHeight = doc.internal.pageSize.getHeight();
    doc.setFontType("normal");
    doc.setFontSize("12");

    var y = 15;
    for (var i = 0; i < bodyContent.length; i++) {
      if (y+10 > pageHeight) {
        y = 15;
        doc.addPage();
      }
      doc.text(10, y, bodyContent[i]);
      y = y + 7;
    }    
     doc.output('dataurlnewwindow');

  }

内容增加时自动分页jspdf

Autopaging jspdf when content increases

javascript

jspdf

angular