JSPDFデータが重複していて、次のページに移動しません

オブジェクトデータの配列を使用してPDFに変換します。しかし、この場合は列が重なっています。私はどこで改行を適用する必要がありますか？私は働いているJsfiddleを付けました。JSPDFデータが重複していて、次のページに移動しません

https://jsfiddle.net/Purushoth/jodfkz59/

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

 
var pageWidth = 595; 
 
var pageHeight = 842; 
 

 
var pageMargin = 40; 
 

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

 
var cellPadding = 10; 
 
var cellWidth = 180; 
 
var cellHeight = 70; 
 
var lineHeight = 20; 
 

 
var startX = pageMargin; 
 
var startY = pageMargin; 
 

 

 
doc.setFontSize(12); 
 

 
function createCard(item) { 
 

 
    //cell projection 
 
    var requiredWidth = startX + cellWidth + (cellPadding * 3); 
 

 
    var requiredHeight = startY + cellHeight + (cellPadding * 2); 
 

 

 

 
    if (requiredWidth <= pageWidth) { 
 

 
    textWriter(item, startX + cellPadding, startY + cellPadding); 
 

 
    startX = requiredWidth; 
 
    // startY += cellHeight + cellPadding; 
 

 
    } else { 
 

 

 
    if (requiredHeight > pageHeight) { 
 
     doc.addPage(); 
 
     startY = pageMargin; 
 
    } else { 
 
     startY = requiredHeight; 
 
    } 
 

 
    startX = pageMargin; 
 

 

 
    textWriter(item, startX + cellPadding, startY + cellPadding); 
 

 
    startX = startX + cellWidth + (cellPadding * 2); 
 
    } 
 

 
} 
 

 
function textWriter(item, xAxis, yAxis) { 
 

 
    doc.text(item.Name, xAxis, yAxis); 
 
    var splitTitle = doc.splitTextToSize(item.Email, 180); 
 
doc.text(15, 20, splitTitle); 
 
    doc.text(item.Email, xAxis, yAxis + lineHeight); 
 
    doc.text(item.Company, xAxis, yAxis + (lineHeight * 2)); 
 
} 
 

 

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

 
doc.save('grid.pdf');

出典

2017-03-27 Tousif

より良い出力の場合、（もちろん無料です）jsPDF-AutoTableプラグインを試してみて、それは本当にあなたが流体を持っているのに役立ちますデータ長に基づいて適応することができる行/列。https://jsfiddle.net/jodfkz59/12/

ワーキングコード：：このことができます

var columns = [{title: "Name", dataKey:"Name"}, {title:"Email", dataKey: "Email"}, {title:"Company", dataKey: "Company"}]; 

var rows = [{ 
    "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" 
}, { 
    "Name": "Kasper1", 
    "Email": "[email protected]", 
    "Company": "Tempor LLP1" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]bulumante.ca", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "Calvin", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}, { 
    "Name": "E.N.D", 
    "Email": "[email protected]", 
    "Company": "Donec Egestas Foundation" 
}]; 



var doc = new jsPDF('p', 'pt'); 
doc.autoTable(columns, rows, { 
    margin: {top: 60}, 
    addPageContent: function(data) { 
     doc.text("Header", 40, 30); 
    } 
}); 
doc.save('table.pdf');

希望

は、ここでの作業DEMOです！

出典

2017-03-27 08:21:01

私はJsautotablesを使用しました。しかし、私の場合、私は水平視野でデータが必要です。垂直視野ではありません。 – Tousif

私はその場合、あなたはテーブルヘッダーだけを取り除きたいと思うかもしれないと思いますか？ –

私の前回の声明に同意するなら、この新しいデモをチェックしてください：https://jsfiddle.net/jodfkz59/13/ –

JSPDFデータが重複していて、次のページに移動しません

答えて

関連する問題