How to fill dynamic data into table longer than one page? #1046

JoK-rgb · 2017-06-16T12:42:15Z

Hey,

I want to fill data from a json file into a dynamic table with pdfmake.
I found this solution: #24
My problem is that if the table is longer than one page it doesn't create a new page.
Furthermore it would be nice that the table would print the table header on every page like it does in the example on the pdfmake playground because it doesn't do that with the solution above.

Below is the example out of the pdfmake playground:

{
style: 'tableExample',
table: {
	headerRows: 1,
	body: [
		[{text: 'Header 1', style: 'tableHeader'}, {text: 'Header 2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'}],
		[
			'content1',
			'content2',
			'content3',
		]
	]
}
},

You can also copy my code into the pdfmake playground (http://pdfmake.org/playground.html) to see my problem:

//------------------------------------JSON + Dynamic Table------------------------------------//
		
		
		myJson = {"Elements":[{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8}],"Kamera":"c1"}

		
		var jstr = JSON.stringify(myJson);
		//alert(jstr);
		var jstr_2 = jstr.slice(13);
		//alert(jstr_2);		
		var jstr_3 = jstr_2.replace('],"Kamera":"c1"}','');
		//alert(jstr_3);	
		var jstr_4 = "[" + jstr_3 + "]";
		//alert(jstr_4);	
		var obj = JSON.parse(jstr_4);
		
		var objkameraname = JSON.parse(jstr);
	
		var externalDataRetrievedFromServer = obj;

		function buildTableBody(data, columns) {
			var body = [];

			body.push(columns);

			data.forEach(function(column) {
				var dataRow = [];

				columns.forEach(function(row) {
					dataRow.push(column[row].toString());
				})

				body.push(dataRow);
			});

			return body;
		}

		function table(data, columns) {
			return {
				style: 'tableExample',
				fontSize: 12,
				margin: [20, -70],
				layout: 'lightHorizontalLines',
				table: {
					headerRows: 1,
					body: buildTableBody(data, columns)
				}
			};
		}

//------------------------------------PDFMake Section------------------------------------//
		
	var dd = {
		footer: function(currentPage, pageCount) { 
			return {
				margin: [20, 15],
				fontSize: 8,
				alignment: 'right',
				text: 'Seite ' + currentPage.toString() + ' von ' + pageCount
			}; 
		}, 
					
		content: [
			{ 
				text: 'Systemausdruck', 
				style: 'header',
				absolutePosition: {x: 60, y: 75}
			},
			{
			style: 'tableExample',
			layout: 'noBorders',
			table: {
				body: [
					[{ text: 'Datum', bold: true }, '    ', 'Date', '', ''],
					[{ text: 'Letzte Änderung', bold: true }, '    ', '', '', ''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					[{ text: 'Produktfamilie', bold: true }, '    ', 'Cardiac','',''],
					[{ text: 'Prozessschritt', bold: true }, '    ', 'Siegeln','',''],
					[{ text: 'Testart', bold: true }, '    ', 'Reagenzkontrolle','',''],
					[{ text: 'Maschinenname', bold: true }, '    ', 'IS 1/1 P','',''],
					[{ text: 'Ordernumber', bold: true }, '    ', '98765432','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					[{ text: 'Batchnumber', bold: true },'    ','12345677','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					['', '', '','',''],
					[{ text: 'Kameraname', bold: true }, '    ', { text: 'Skalierstrecke', bold: true }, '    ', { text: 'Skalierfaktor', bold: true }],
					[objkameraname.Kamera, '    ', '50000 μm', '    ', '28,47 μm/px']
				]
			}
			},
			{
			layout: 'noBorders',
			table: {
				body: [
					[table(externalDataRetrievedFromServer, ['LowerTolerance', 'Name', 'ReferenceValue', 'UpperTolerance', 'Valid', 'Value'])],
					]
			}
			},
			
			
			{
				margin: [20, 160],
				text: [
					{ text: '_________________________________________\n', fontSize: 15, bold: false },
					{ text: 'Datum / Unterschrift (Mechaniker / in)\n', fontSize: 9 },
					{ text: 'Der Ausdruck wurde gegen die gültige Vorgabe geprüft und ist korrekt.', fontSize: 9 },
				]	
			},
		
		],
		styles: {
				header: {
					fontSize: 30,
					bold: true,
					italics: true,
					margin: [0, 0, 0, 10]
				},
				tableExample: {
					fontSize: 12,
					margin: [20, 100],
				},
				tableExample2: {
					fontSize: 9,
					margin: [20, 130],
				},
			}		
	}

If you could help me you would make me really happy.

The text was updated successfully, but these errors were encountered:

NevilDabre · 2017-06-16T13:20:12Z

Try with a Page Break function

pageBreakBefore: function (currentNode) { return currentNode.id === 'mediaRow' && currentNode.pageNumbers.length > 1; }

JoK-rgb · 2017-06-16T18:05:42Z

Okay I tried it again by scratch and it works. I don't know what I did wrong in my first version though.

    myJson = {"Elements":[{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":20,"Name":"def","ReferenceValue":21.5,"UpperTolerance":23,"Valid":true,"Value":22.8},{"LowerTolerance":4.5,"Name":"ghi","ReferenceValue":5,"UpperTolerance":5.5,"Valid":false,"Value":4},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8},{"LowerTolerance":1.4,"Name":"abc","ReferenceValue":1.5,"UpperTolerance":1.6,"Valid":false,"Value":1.8}],"Kamera":"c1"}

		
		var jstr = JSON.stringify(myJson);
		//alert(jstr);
		var jstr_2 = jstr.slice(13);
		//alert(jstr_2);		
		var jstr_3 = jstr_2.replace('],"Kamera":"c1"}','');
		//alert(jstr_3);	
		var jstr_4 = "[" + jstr_3 + "]";
		//alert(jstr_4);	
		var obj = JSON.parse(jstr_4);
		var externalDataRetrievedFromServer = obj;   
    
   

function buildTableBody(data, columns) {
    var body = [];

    body.push(columns);

    data.forEach(function(row) {
        var dataRow = [];

        columns.forEach(function(column) {
            dataRow.push(row[column].toString());
        })

        body.push(dataRow);
    });

    return body;
}

function table(data, columns) {
    return {
				fontSize: 12,
				margin: [20, 20],
				layout: 'lightHorizontalLines',
        table: {
            headerRows: 1,
            body: buildTableBody(data, columns)
        }
    };
}

var dd = {
    footer: function(currentPage, pageCount) { 
			return {
				margin: [20, 15],
				fontSize: 8,
				alignment: 'right',
				text: 'Seite ' + currentPage.toString() + ' von ' + pageCount
			}; 
		}, 
    content: [
        table(externalDataRetrievedFromServer, ['LowerTolerance', 'Name', 'ReferenceValue', 'UpperTolerance', 'Valid', 'Value'])
    ]
}

NevilDabre · 2017-06-16T19:11:17Z

inside dd

`var dd = {
footer: function(currentPage, pageCount) {
return {
margin: [20, 15],
fontSize: 8,
alignment: 'right',
text: 'Seite ' + currentPage.toString() + ' von ' + pageCount
};
},
content: [
table(externalDataRetrievedFromServer, ['LowerTolerance', 'Name', 'ReferenceValue', 'UpperTolerance', 'Valid', 'Value'])
],

pageBreakBefore: function (currentNode) { return currentNode.id === 'mediaRow' && currentNode.pageNumbers.length > 1; }
}`

liborm85 · 2017-06-17T05:34:21Z

The sample contains blank table rows, for example:

["","","","",""]

And it will break the page wrap.

For example, replace this:

[" ","","","",""]

JoK-rgb · 2017-06-19T07:47:52Z

That's it! Thank you!

JoK-rgb closed this as completed Jun 19, 2017

5cotts mentioned this issue Apr 24, 2019

Multi-page PDF with Dynamic Data Styling Error #1707

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to fill dynamic data into table longer than one page? #1046

How to fill dynamic data into table longer than one page? #1046

JoK-rgb commented Jun 16, 2017

NevilDabre commented Jun 16, 2017 •

edited

JoK-rgb commented Jun 16, 2017

NevilDabre commented Jun 16, 2017 •

edited

liborm85 commented Jun 17, 2017 •

edited

JoK-rgb commented Jun 19, 2017

How to fill dynamic data into table longer than one page? #1046

How to fill dynamic data into table longer than one page? #1046

Comments

JoK-rgb commented Jun 16, 2017

NevilDabre commented Jun 16, 2017 • edited

JoK-rgb commented Jun 16, 2017

NevilDabre commented Jun 16, 2017 • edited

liborm85 commented Jun 17, 2017 • edited

JoK-rgb commented Jun 19, 2017

NevilDabre commented Jun 16, 2017 •

edited

NevilDabre commented Jun 16, 2017 •

edited

liborm85 commented Jun 17, 2017 •

edited