JSPDF：当页面数据已满时，转移到新页面

Question

我在JSPDF中是新手，正在创建一个PDF页面，就像这样的 现在的问题是，当数据填满该页面时，它不会产生新页面。我查看了github和其他stackoverflow上的解决方案，但没有得到解决方案。 [JSPDF演示链接在此][3]

[3]: > https://jsfiddle.net/jodfkz59/7/

var data = [{
      "Name": "Ronan",
      "Email": "[e-mail]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[e-mail]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[e-mail]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[e-mail]",
      "Company": "Tempor LLP"
    }];
    
    
    var doc = new jsPDF('p', 'pt', 'a4');
    //Dimension of A4 in pts: 595 × 842
    
    var pageWidth = 595;
    var pageHeight = 842;
    var y=500;
    var pageMargin = 10;
    
    pageWidth -= pageMargin * 2;
    pageHeight -= pageMargin * 2;
    
    var cellMargin = 5;
    var cellWidth = 250;
    var cellHeight = 60;
    
    var startX = pageMargin;
    var startY = pageMargin;
    
    function createCard(item) {
    
      // doc.getTextDimensions(item.Name); turncate or split string if you needed
      
    if (y >= pageHeight)
{
  doc.addPage();
  y = 0 // Restart height position
}
    
      doc.text(item.Name, startX, startY);
      doc.text(item.Email, startX, startY + 20);
      doc.text(item.Company, startX, startY + 40);
    
      var nextPosX = startX + cellWidth + cellMargin;
    
      if (nextPosX > pageWidth) {
        startX = pageMargin;
        startY += cellHeight;
      } else {
        startX = nextPosX;
      }
    
    }
    
    
    for (var i = 0; i < data.length; i++) {
      createCard(data[i]);
    }

- tousif Noor

---

你没有混淆 y 和 startY 吗？在你的代码中，y始终为500。 - Fefux

@Fefux 我尝试了不同的值。如果你有想法，能否请指导我？ - tousif Noor

请看这里：https://jsfiddle.net/jodfkz59/7。我只是更改了您的条件以添加页面。 - Fefux

@Fefux，我觉得你忘记更新fiddle了吧？代码还是一样的。而且没有添加新页面。 - tousif Noor

抱歉 => https://jsfiddle.net/jodfkz59/8/ - Fefux

@Fefux 谢谢你兄弟。是的，我需要这个。你能把它发布为你的答案吗？这样我就可以将其标记为答案。再次感谢。 - tousif Noor

Answer 1

问题在函数 createCard 的条件语句中。您需要根据实际的 y 偏移值更改测试条件。

请参阅以下示例： https://jsfiddle.net/jodfkz59/8/

var data = [{
      "Name": "Ronan",
      "Email": "[e-mail]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[e-mail]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[e-mail]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[e-mail]",
      "Company": "Tempor LLP"
    }];


    var doc = new jsPDF('p', 'pt', 'a4');
    //Dimension of A4 in pts: 595 × 842

    var pageWidth = 595;
    var pageHeight = 842;
    var y=500;
    var pageMargin = 10;

    pageWidth -= pageMargin * 2;
    pageHeight -= pageMargin * 2;

    var cellMargin = 5;
    var cellWidth = 250;
    var cellHeight = 60;

    var startX = pageMargin;
    var startY = pageMargin;

    function createCard(item) {

      // doc.getTextDimensions(item.Name); turncate or split string if you needed

    if (startY >= pageHeight)
{
  doc.addPage();
  startY = pageMargin  // Restart height position
}

      doc.text(item.Name, startX, startY);
      doc.text(item.Email, startX, startY + 20);
      doc.text(item.Company, startX, startY + 40);

      var nextPosX = startX + cellWidth + cellMargin;

      if (nextPosX > pageWidth) {
        startX = pageMargin;
        startY += cellHeight;
      } else {
        startX = nextPosX;
      }

    }


    for (var i = 0; i < data.length; i++) {
      createCard(data[i]);
    }

- Fefux

Answer 2

使用 "startY" 并加上 1000，它会自动推到新页面。

doc.autoTable({html:"#exportfrontpageTable",startY:doc.autoTable.previous.finalY + 1115});

- Manish Shukla