javascript - JSPDF shift to new page when Data is full in page - Stack Overflow

admin管理员组

文章数量:1295331

I am new in JSPDF and creating a page of PDF like this Now Problem is that when data is full on this page it didn't produce new page. I have that github and other solutions on stack overflow. but not getting solution. [JSPDF demo link is here][3]

[3]: > /

var data = [{
      "Name": "Ronan",
      "Email": "[email protected]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[email protected]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[email protected]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[email protected]",
      "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]);
    }

I am new in JSPDF and creating a page of PDF like this Now Problem is that when data is full on this page it didn't produce new page. I have that github and other solutions on stack overflow. but not getting solution. [JSPDF demo link is here][3]

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

var data = [{
      "Name": "Ronan",
      "Email": "[email protected]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[email protected]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[email protected]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[email protected]",
      "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]);
    }

• javascript
• jspdf
• jspdf-autotable

Share Improve this question Follow asked Mar 21, 2017 at 18:02 tousif Noortousif Noor 39511 gold badge55 silver badges1919 bronze badges 6

• You didn't confuse y and startY? In your code, y is always 500 – Fefux Commented Mar 21, 2017 at 18:07
• @Fefux I was trying with diff values. If you have idea can you guide me please ? – tousif Noor Commented Mar 21, 2017 at 18:08
• See here : jsfiddle/jodfkz59/7 . I just change your condition to add pages – Fefux Commented Mar 21, 2017 at 18:11
• @Fefux I think you forget to update fiddle ? code is same . And no new page is added – tousif Noor Commented Mar 21, 2017 at 18:13
• sorry => jsfiddle/jodfkz59/8 – Fefux Commented Mar 21, 2017 at 18:15

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

The problem is in the condition in the function createCard. You have to change your test on your real current value of y offset.

See this fiddle : https://jsfiddle/jodfkz59/8/

var data = [{
      "Name": "Ronan",
      "Email": "[email protected]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[email protected]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[email protected]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[email protected]",
      "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]);
    }

Use "startY" and add 1000, it will automatically push to new page

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

本文标签： javascriptJSPDF shift to new page when Data is full in pageStack Overflow