Pdfmake: Issue with multi columns in second page content
I have a content definition look like this:
docDefinition.content = {
stack: [
{
columns: [
{
width: '*',
stack: [
{ text: '鍚堣▓: $', alignment: 'right', fontSize: 14 },
{ text: '鎶樻墸: $', alignment: 'right', fontSize: 14 },
{ text: '閬嬭几: $', alignment: 'right', fontSize: 14 },
],
},
{
width: '100',
stack: [
{ text: obj[0].sub_tot_amt.toFixed(DECIMAL_POINT), alignment: 'right', fontSize: 14 },
{ text: '- ' + parseFloat(obj[0].discount_tot_amt).toFixed(DECIMAL_POINT), alignment: 'right', fontSize: 14 },
{ text: parseFloat(obj[0].txfr_fee).toFixed(DECIMAL_POINT), alignment: 'right', fontSize: 14 },
]
}
],
margin: [0, 20, 0, 0]
},
{ canvas: [{ type: 'line', x1: 300, y1: 5, x2: 595 - 40, y2: 5, lineWidth: 1 }], headlineLevel: 'check' },
{
columns: [
{width: '*', text: '绺借▓: $', alignment: 'right', bold: true, fontSize: 14 },
{width: '100',text: obj[0].tot_amt, alignment: 'right', bold: true, fontSize: 14 }
]
}
],
margin: [20, 0, 20, 0]
};
If it display on single page, it works fine.
But if it display on seond page by the dynamic content, the second columns will out of display
Its seems didn't count the margin.
Can anyone provide some solution to fit on single / multi page?
table
carltin0315
All 4 comments
Please provide working example code so that someone can copy/paste into the pdfmake playground.
oduska
on 9 Jul 2020
Please provide working example code so that someone can copy/paste into the pdfmake playground.
var dd = {
paegSize:'A4',
content: [
{
layout: 'lightHorizontalLines',
alignment: 'right',
margin: [20, 0, 20, 0],
table: {
headerRows: 1,
widths: ['*', 60, 60, 60, 60],
body: [
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
]
}
},
{
columns: [
{
width: '*',
stack: [
{ text: 'sub total: $', alignment: 'right', fontSize: 14 },
{ text: 'discount: $', alignment: 'right', fontSize: 14 },
{ text: 'fee: $', alignment: 'right', fontSize: 14 },
],
},
{
width: '100',
stack: [
{ text: '9999.0000', alignment: 'right', fontSize: 14 },
{ text: '-1111.0000', alignment: 'right', fontSize: 14 },
{ text: '2222.0000', alignment: 'right', fontSize: 14 },
]
}
],
margin:[20 ,0,20,0]
},
{ canvas: [{ type: 'line', x1: 300, y1: 5, x2: 540 - 40, y2: 5, lineWidth: 1 }],margin:[20 ,0,20,0]},
{
columns: [
{
width: '*',
text: 'TOTAL: $',
alignment: 'right',
bold: true,
fontSize: 14
},
{
width: '100',
text: '11110.0000',
alignment: 'right',
bold: true,
fontSize: 14
}
]
,margin:[20 ,0,20,0]
},
]
}
Here is the sample which can run on the playground.
When add and remove the row of the table and make the sub-total part push to the second page,
you wll see the margin of it is wrong.
carltin0315
on 11 Jul 2020
👍1
Looks like a margin bug to me.
Until there's a bug fix I was able to fix it by commenting out your margins on the table and columns and using pageMargins instead:
var dd = {
pageSize:'A4',
// Added pageMargins
pageMargins: [ 60, 60, 60, 60 ],
content: [
{
layout: 'lightHorizontalLines',
alignment: 'right',
//margin: [20, 0, 20, 0],
table: {
headerRows: 1,
widths: ['*', 60, 60, 60, 60],
body: [
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
['Col A', 'Col B', 'col C', 'col D', 'col E'],
]
}
},
{
columns: [
{
width: '*',
stack: [
{ text: 'sub total: $', alignment: 'right', fontSize: 14 },
{ text: 'discount: $', alignment: 'right', fontSize: 14 },
{ text: 'fee: $', alignment: 'right', fontSize: 14 },
],
},
{
width: '100',
stack: [
{ text: '9999.0000', alignment: 'right', fontSize: 14 },
{ text: '-1111.0000', alignment: 'right', fontSize: 14 },
{ text: '2222.0000', alignment: 'right', fontSize: 14 },
]
}
],
//margin:[20 ,0,20,0]
},
{ canvas: [{ type: 'line', x1: 300, y1: 5, x2: 540 - 40, y2: 5, lineWidth: 1 }],margin:[20 ,0,20,0]},
{
columns: [
{
width: '*',
text: 'TOTAL: $',
alignment: 'right',
bold: true,
fontSize: 14
},
{
width: '100',
text: '11110.0000',
alignment: 'right',
bold: true,
fontSize: 14
}
]
,//margin:[20 ,0,20,0]
},
]
}
👍1
Looks like a margin bug to me.
Until there's a bug fix I was able to fix it by commenting out your margins on the table and columns and using pageMargins instead:
var dd = { pageSize:'A4', // Added pageMargins pageMargins: [ 60, 60, 60, 60 ], content: [ { layout: 'lightHorizontalLines', alignment: 'right', //margin: [20, 0, 20, 0], table: { headerRows: 1, widths: ['*', 60, 60, 60, 60], body: [ ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ['Col A', 'Col B', 'col C', 'col D', 'col E'], ] } }, { columns: [ { width: '*', stack: [ { text: 'sub total: $', alignment: 'right', fontSize: 14 }, { text: 'discount: $', alignment: 'right', fontSize: 14 }, { text: 'fee: $', alignment: 'right', fontSize: 14 }, ], }, { width: '100', stack: [ { text: '9999.0000', alignment: 'right', fontSize: 14 }, { text: '-1111.0000', alignment: 'right', fontSize: 14 }, { text: '2222.0000', alignment: 'right', fontSize: 14 }, ] } ], //margin:[20 ,0,20,0] }, { canvas: [{ type: 'line', x1: 300, y1: 5, x2: 540 - 40, y2: 5, lineWidth: 1 }],margin:[20 ,0,20,0]}, { columns: [ { width: '*', text: 'TOTAL: $', alignment: 'right', bold: true, fontSize: 14 }, { width: '100', text: '11110.0000', alignment: 'right', bold: true, fontSize: 14 } ] ,//margin:[20 ,0,20,0] }, ] }
It work for me! Thank you so much.
carltin0315
on 13 Jul 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
m-brudi
路
3Comments
jkd003
路
3Comments
CharlyPoppins
路
3Comments
sayjeyhi
路
3Comments
dgrice
路
3Comments