JSPDF zu neuer Seite wechseln, wenn Daten voll sind in Seite

Question

Ich bin neu in JSPDF und erstellen eine Seite von PDF wie folgt Jetzt Problem ist, dass, wenn Daten auf dieser Seite voll ist es keine neue Seite produziert. Ich habe das github und andere Lösungen auf Stapelüberlauf. aber keine Lösung bekommen. [JSPDF Demo Link ist hier] [3]

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

var data = [{ 
 
     "Name": "Ronan", 
 
     "Email": "sodales.elit@eratSed.co.uk", 
 
     "Company": "Malesuada Malesuada Ltd" 
 
    }, { 
 
     "Name": "Calvin", 
 
     "Email": "amet.nulla@Vestibulumante.ca", 
 
     "Company": "Donec Egestas Foundation" 
 
    }, { 
 
     "Name": "Kane", 
 
     "Email": "Duis.mi@consectetueradipiscingelit.net", 
 
     "Company": "Arcu Institute" 
 
    }, { 
 
     "Name": "Kasper", 
 
     "Email": "magna.Phasellus.dolor@velconvallisin.co.uk", 
 
     "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]); 
 
    }

Answer 1

Das Problem ist in dem Zustand, in der Funktion createCard. Sie müssen Ihren Test auf Ihren tatsächlichen aktuellen Wert von y-Offset ändern.

diese Geige Siehe: https://jsfiddle.net/jodfkz59/8/

var data = [{ 
     "Name": "Ronan", 
     "Email": "sodales.elit@eratSed.co.uk", 
     "Company": "Malesuada Malesuada Ltd" 
    }, { 
     "Name": "Calvin", 
     "Email": "amet.nulla@Vestibulumante.ca", 
     "Company": "Donec Egestas Foundation" 
    }, { 
     "Name": "Kane", 
     "Email": "Duis.mi@consectetueradipiscingelit.net", 
     "Company": "Arcu Institute" 
    }, { 
     "Name": "Kasper", 
     "Email": "magna.Phasellus.dolor@velconvallisin.co.uk", 
     "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]); 
    }