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

对于 pagesplit 参数，您可以使用addHTML

修改：

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

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

2 个答案: