Pdfmake: how to find when page breaks - dynamically render pdf document
1)I rendered pdf dynamically, in that scenario pdf content went to next page partially. So is there any event available to identify when the page is break. or any other option to overcome this issue.
2) rendered border only for last element, but if page breaks the bottom border not showing.
table
balajikarthiq
👍1
All 13 comments
1) Event when page breaked is not available.
2) Please attach example of docDefinition for reproduce (executable on http://pdfmake.org/playground.html).
liborm85
on 15 Dec 2017
No reaction.
liborm85
on 19 Dec 2017
balajikarthiq
on 23 Dec 2017
2) When line is drawed is defined in hLineWidth:
hLineWidth: function (i, node) {
if (i === 0 || i === node.table.body.length) {
return 1;
}
return (i === node.table.headerRows) ? 1 : 0;
},
Condition/variable for when page is breaked is not available.
liborm85
on 23 Dec 2017
yes thanks for the reply.
- any idea? how to move the table second page (rendered the content dynamically, so how to prevent the partial content break)
- yes, in that scenario i'm not aware how to show horizontal lines.
balajikarthiq
on 24 Dec 2017
- maybe it could be solved using
pageBreakBefore, see description in readme.
liborm85
on 25 Dec 2017
not sure how to draw on horizontal line and how to handle above issue using page break function.. will check on that.. meanwhile if anyone got solution please share it.
balajikarthiq
on 26 Dec 2017
- Using
stackandunbreakable: trueshould do what you want:
var dd = {
content:
[
{
columns: [
{
text: [
{ text: 'abcdde', style: 'header' },
'\n 123456789 \n [email protected] \n newyork XXXXXXXXX',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
],
style: 'normal'
}
]
},
'\n',
{
unbreakable: true,
stack: [
{
style: 'tableExample',
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 1,
widths: ["16%", "16%", "16%", "16%", "16%", "*"],
body: [
[{ text: 'Header 1', style: 'tableHeader' }, { text: 'Header 2', style: 'tableHeader' }, { text: 'Header 3', style: 'tableHeader' }, { text: 'Header 4', style: 'tableHeader' }, { text: 'Header 5', style: 'tableHeader' }, { text: 'Header 6', style: 'tableHeader' }],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
]
}
},
{
columns: [
{
text: '', width: '*'
},
{
layout: 'noBorders',
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
//headerRows: 1,
widths: ["auto", "*"],
body: [
[{ text: "subtotal", style: 'total' }, { text: "678.00", alignment:'right', style: 'total' }],
[{ text: "tax", style: 'total' }, { text: "90.00", alignment: 'right', style: 'total' }],
[{ text: "discount", style: 'total' }, { text: "11.25", alignment: 'right', style: 'total' }],
[{ text: "Total", style: 'total' }, { text: "776.25", alignment: 'right', style: 'total' }],
[{ text: "Balance Due", style: 'total', bold: true, }, { text: "Rs. 776.25", alignment: 'right', style: 'total', bold: true }],
]
},
width: '35%',
}
]
}
]
}
],
styles: {
normal: {
fontSize: 10,
margin: [0, 0, 0, 10],
lineHeight: 1.25
},
header: {
fontSize: 12,
bold: true,
margin: [0, 0, 0, 10],
lineHeight: 1.25
}
}
};
👍9
🎉5
thanks
but it's not working when the first table have lots of rows.
balajikarthiq
on 28 Dec 2017
If you want first table to wrap by pages, can only be used on second table unbreakable: true. Example of usage:
var dd = {
content:
[
{
columns: [
{
text: [
{ text: 'abcdde', style: 'header' },
'\n 123456789 \n [email protected] \n newyork XXXXXXXXX',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
'\nYou can also specify accurate widths for some (or all columns). Let\'s make the first column and the last one narrow and let the layout engine divide remaining space equally between other star-columns:\n\n',
],
style: 'normal'
}
]
},
'\n',
{
style: 'tableExample',
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 1,
widths: ["16%", "16%", "16%", "16%", "16%", "*"],
body: [
[{ text: 'Header 1', style: 'tableHeader' }, { text: 'Header 2', style: 'tableHeader' }, { text: 'Header 3', style: 'tableHeader' }, { text: 'Header 4', style: 'tableHeader' }, { text: 'Header 5', style: 'tableHeader' }, { text: 'Header 6', style: 'tableHeader' }],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"],
["5000", "4500", "5100", "1500", "9600", "2500"]
]
}
},
{
unbreakable: true,
stack: [
{
columns: [
{
text: '', width: '*'
},
{
layout: 'noBorders',
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
//headerRows: 1,
widths: ["auto", "*"],
body: [
[{ text: "subtotal", style: 'total' }, { text: "678.00", alignment:'right', style: 'total' }],
[{ text: "tax", style: 'total' }, { text: "90.00", alignment: 'right', style: 'total' }],
[{ text: "discount", style: 'total' }, { text: "11.25", alignment: 'right', style: 'total' }],
[{ text: "Total", style: 'total' }, { text: "776.25", alignment: 'right', style: 'total' }],
[{ text: "Balance Due", style: 'total', bold: true, }, { text: "Rs. 776.25", alignment: 'right', style: 'total', bold: true }],
]
},
width: '35%',
}
]
}
]
}
],
styles: {
normal: {
fontSize: 10,
margin: [0, 0, 0, 10],
lineHeight: 1.25
},
header: {
fontSize: 12,
bold: true,
margin: [0, 0, 0, 10],
lineHeight: 1.25
}
}
};
thanks,
that solved the above issue. (table break)
Can you help me on the second issue? (border - how to show the border) - yes, as you mentioned it handled by externally with 'customHorizontalLines' functions in pdf table layout. but don't know how to show the line when page break.
In that scenario unbreakable will not be work, because what will be happen if the table have lots of rows more than 2 page.
balajikarthiq
on 29 Dec 2017
👍1
stack + unbreakable did the trick for me. Thanks a lot @liborm85.
aspnetde
on 17 Jan 2019
stack with unbreakable is amazing
ArulRozario
on 5 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
jkd003
路
3Comments
kumarandena
路
3Comments
m-brudi
路
3Comments
kamilkp
路
3Comments
ValeSauer
路
3Comments
Most helpful comment
stackandunbreakable: trueshould do what you want: