有问题的pdfmake js.表边框不工作

Question

我试图在表格布局中打印发票。文档在pdfmake操场上观看很好，但当我在现场打开文档时，它不支持边界属性。显示所有边框。我希望文档与在playground中查看的文档相同。另外，当我尝试使用print()直接打印时，它会给出性能警告。由于

page = {
table: {
widths: ['*', '*', '*', '*'],
body: [
[
{ text: 'HEADWAY EXCELLENCE (SMC-PRIVATE) LIMITED', alignment: 'center', bold: true, margin: [0, 0], border: [false, false, false, false] },
{ text: 'HEADWAY EXCELLENCE (SMC-PRIVATE) LIMITED', alignment: 'center', bold: true, margin: [0, 0], border: [false, false, false, false] },
{ text: 'HEADWAY EXCELLENCE (SMC-PRIVATE) LIMITED', alignment: 'center', bold: true, margin: [0, 0], border: [false, false, false, false] },
{ text: 'HEADWAY EXCELLENCE (SMC-PRIVATE) LIMITED', alignment: 'center', bold: true, margin: [0, 0], border: [false, false, false, false] },
],
[
{
border: [false, false, true, false],
table: {
widths: ['*', '*'],
body: [
[
{ text: 'ACC# ', alignment: 'left', fontSize: 9, border: [false, false, false, false] },
{ text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] },
],
[{ text: 'Branch Code:  ', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'The Bank of Punjab', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: "Payable at any branch", alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
]
}
},
{
border: [true, false, true, false],
table: {
widths: ['*', '*'],
body: [
[{ text: 'ACC# ', alignment: 'left', fontSize: 9, border: [false, false, false, false] },
{ text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'Branch Code:  ', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'The Bank of Punjab', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: "Payable at any branch", alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
]
}
},
{
border: [true, false, true, false],
table: {
widths: ['*', '*'],
body: [
[{ text: 'ACC# ', alignment: 'left', fontSize: 9, border: [false, false, false, false] },
{ text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'Branch Code:  ', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'The Bank of Punjab', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: "Payable at any branch", alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
]
}
},
{
border: [true, false, false, false],
table: {
widths: ['*', '*'],
body: [
[{ text: 'ACC# ', alignment: 'left', fontSize: 9, border: [false, false, false, false] },
{ text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'Branch Code:  ', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: 'The Bank of Punjab', alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
[{ text: "Payable at any branch", alignment: 'left', fontSize: 9, border: [false, false, false, false] }, { text: '', alignment: 'left', fontSize: 9, border: [false, false, false, false] }],
]
}
},
],
[
{ text: "", alignment: 'center', bold: true, border: [false, false, false, false] },
{ text: "", alignment: 'center', bold: true, border: [false, false, false, false] },
{ text: "", alignment: 'center', bold: true, border: [false, false, false, false] },
{ text: "", alignment: 'center', bold: true, border: [false, false, false, false] },
], [
{
border: [false, false, true, false], alignment: 'center', table: {
width: ['*', '*'], body: [[{ text: "Payable By:", bold: true, fontSize: 14, alignment: 'right', border: [true, true, false, true] },
{ text: '', fontSize: 14, bold: true, alignment: 'left', border: [false, true, true, true] }]]
}
},
{
border: [true, false, true, false], alignment: 'center', table: {
width: ['*', '*'], body: [[{ text: "Payable By:", bold: true, fontSize: 14, alignment: 'right', border: [true, true, false, true] },
{ text: '', fontSize: 14, bold: true, alignment: 'left', border: [false, true, true, true] }]]
}
},
{
border: [true, false, true, false], alignment: 'center', table: {
width: ['*', '*'], body: [[{ text: "Payable By:", bold: true, fontSize: 14, alignment: 'right', border: [true, true, false, true] },
{ text: '', fontSize: 14, bold: true, alignment: 'left', border: [false, true, true, true] }]]
}
},
{
border: [true, false, false, false], alignment: 'center', table: {
width: ['*', '*'], body: [[{ text: "Payable By:", bold: true, fontSize: 14, alignment: 'right', border: [true, true, false, true] },
{ text: '', fontSize: 14, bold: true, alignment: 'left', border: [false, true, true, true] }]]
}
}
],
[
{
border: [false, false, true, false],
table: {
widths: [60, '*'],
body: [
[{ text: 'Challan #:', border: [false, false, false, false] },
{ text: '', alignment: 'center', bold: true }],
[{ text: 'Name:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Father:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Class:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],


]
},
},
{
border: [false, false, true, false],
table: {
widths: [60, '*'],
body: [
[{ text: 'Challan #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true }],
[{ text: 'Name:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Father:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Class:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],

]
},
},
{
border: [false, false, true, false],
table: {
widths: [60, '*'],
body: [
[{ text: 'Challan #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true }],
[{ text: 'Name:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Father:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Class:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],

]
},
},
{
border: [false, false, false, false],
table: {
widths: [60, '*'],
body: [
[{ text: 'Challan #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true }],
[{ text: 'Name:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Father:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Class:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],


]
},
},
],
[
{
border: [false, false, true, true], margin: [0, 0, 0, 5],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'Roll #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Sec:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Fee:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Marks:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
]
}
},
{
border: [false, false, true, true], margin: [0, 0, 0, 5],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'Roll #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Sec:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Fee:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Marks:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
]
}
},
{
border: [false, false, true, true], margin: [0, 0, 0, 5],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'Roll #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Sec:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Fee:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Marks:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
]
}
},
{
border: [false, false, false, true], margin: [0, 0, 0, 5],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'Roll #:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Sec:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
[{ text: 'Fee:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }, { text: 'Marks:', border: [false, false, false, false] }, { text: '', alignment: 'center', bold: true, border: [false, false, false, true] }],
]
}
}
],
[{
border: [false, true, true, false], margin: [0, 2, 0, 0],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Particulars', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Actual', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Receivable', bold: true, alignment: 'center', fontSize: 10 }],
[{ text: 'Tution fee', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Exemption', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
]
}
},
{
border: [true, true, false, false], margin: [0, 2, 0, 0],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Particulars', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Actual', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Receivable', bold: true, alignment: 'center', fontSize: 11 }],
[{ text: 'Tution fee', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Exemption', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }]
]
}
},
{
border: [true, true, false, false], margin: [0, 2, 0, 0],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Particulars', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Actual', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Receivable', bold: true, alignment: 'center', fontSize: 10 }],
[{ text: 'Tution fee', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Exemption', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }]
]
}
},
{
border: [true, true, false, false], margin: [0, 2, 0, 0],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Particulars', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Actual', bold: true, alignment: 'center', fontSize: 10 }, { text: 'Receivable', bold: true, alignment: 'center', fontSize: 10 }],
[{ text: 'Tution fee', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Exemption', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }]
]
}
},
],
[{
border: [false, false, false, false],
table: {
widths: [54, '*'],
body: [
[{ text: 'Payable Amount', fontSize: 12, bold: true, border: [false, false, false, false] }, {}]
]
}
},
{
border: [true, false, false, false],
table: {
widths: [54, '*'],
body: [
[{ text: 'Payable Amount', fontSize: 12, bold: true, border: [false, false, false, false] }, {}]
]
}
},
{
border: [true, false, false, false],
table: {
widths: [54, '*'],
body: [
[{ text: 'Payable Amount', fontSize: 12, bold: true, border: [false, false, false, false] }, {}]
]
}
},
{
border: [true, false, false, false],
table: {
widths: [54, '*'],
body: [
[{ text: 'Payable Amount', fontSize: 12, bold: true, border: [false, false, false, false] }, {}]
]
}
},
],
[{
border: [false, false, true, false],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Next Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
]
}
},
{
border: [true, false, false, false],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Next Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
]
}
},
{
border: [true, false, false, false],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Next Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
]
}
},
{
border: [true, false, false, false],
table: {
widths: ['*', '*', '*'],
body: [
[{ text: 'Next Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
[{ text: 'Sub-Installment', fontSize: 9 }, { text: '', fontSize: 9 }, { text: '', fontSize: 9 }],
]
}
},
],
[
{
ol: [[
], 'Plaese Pay before Challan Expiry to avoid late payment charges.',
'Dues once paid are not refundable.'
], margin: [8, 10], border: [false, false, true, false], fontSize: 10
},
{
ol: [[
], 'Plaese Pay before Challan Expiry to avoid late payment charges.',
'Dues once paid are not refundable.'
], margin: [8, 10], border: [true, false, true, false], fontSize: 10
},
{
ol: [[
], 'Plaese Pay before Challan Expiry to avoid late payment charges.',
'Dues once paid are not refundable.'
], margin: [8, 10], border: [true, false, true, false], fontSize: 10
},
{
ol: [[
], 'Plaese Pay before Challan Expiry to avoid late payment charges.',
'Dues once paid are not refundable.'
], margin: [8, 10], border: [true, false, false, false], fontSize: 10
}
],
[
{
margin: [0, 30, 0, 0],
border: [false, false, true, false],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'For Bank Use', colSpan: 4, alignment: 'center', border: [true, true, true, false] }, {}, {}, {}],
[{ text: 'Campus Code', border: [true, true, false, true] }, { text: '', border: [false, true, false, true] }, { text: 'Document No', border: [false, true, false, true] }, { text: '', border: [false, true, true, true] }]
]
}
},
{
margin: [0, 30, 0, 0],
border: [true, false, true, false],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'For Bank Use', colSpan: 4, alignment: 'center', border: [true, true, true, false] }, {}, {}, {}],
[{ text: 'Campus Code', border: [true, true, false, true] }, { text: '', border: [false, true, false, true] }, { text: 'Document No', border: [false, true, false, true] }, { text: '', border: [false, true, true, true] }]
]
}
},
{
margin: [0, 30, 0, 0],
border: [true, false, true, false],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'For Bank Use', colSpan: 4, alignment: 'center', border: [true, true, true, false] }, {}, {}, {}],
[{ text: 'Campus Code', border: [true, true, false, true] }, { text: '', border: [false, true, false, true] }, { text: 'Document No', border: [false, true, false, true] }, { text: '', border: [false, true, true, true] }]
]
}
},
{
margin: [0, 30, 0, 0],
border: [true, false, false, false],
table: {
widths: ['*', '*', '*', '*'],
body: [
[{ text: 'For Bank Use', colSpan: 4, alignment: 'center', border: [true, true, true, false] }, {}, {}, {}],
[{ text: 'Campus Code', border: [true, true, false, true] }, { text: '', border: [false, true, false, true] }, { text: 'Document No', border: [false, true, false, true] }, { text: '', border: [false, true, true, true] }]
]
}
}
],
[
{
text: 'Note:', margin: [0, 0, 0, 20],
border: [false, false, true, false],
},
{
text: 'Note:', margin: [0, 0, 0, 20],
border: [true, false, true, false],
},
{
text: 'Note:', margin: [0, 0, 0, 20],
border: [true, false, true, false],
},
{
text: 'Note:', margin: [0, 0, 0, 20],
border: [true, false, false, false],
}
],
[
{
border: [false, true, true, false],
table: {
widths: ['*', '*'],
body: [
[{ text: '', border: [false, false, false, false] }, { text: '', border: [false, false, false, false] }],
[{ text: 'Head Office Copy', border: [true, true, false, true], fillColor: 'black', color: 'white' }, { text: '', border: [false, false, false, false] }]
]
}
},
{
border: [false, true, true, false],
table: {
widths: ['*', '*'],
body: [
[{ text: '', border: [false, false, false, false] }, { text: '', border: [false, false, false, false] }],
[{ text: 'Campus Copy', border: [true, true, false, true], fillColor: 'black', color: 'white' }, { text: '', border: [false, false, false, false] }]
]
}
},
{
border: [false, true, true, false],
table: {
widths: ['*', '*'],
body: [
[{ text: '', border: [false, false, false, false] }, { text: '', border: [false, false, false, false] }],
[{ text: "Bank's Copy", border: [true, true, false, true], fillColor: 'black', color: 'white' }, { text: '', border: [false, false, false, false] }]
]
}
},
{
border: [false, true, false, false],
table: {
widths: ['*', '*'],
body: [
[{ text: '', border: [false, false, false, false] }, { text: '', border: [false, false, false, false] }],
[{ text: "Student's Copy", border: [true, true, false, true], fillColor: 'black', color: 'white' }, { text: '', border: [false, false, false, false] }]
]
}
}
]
]
, layout: {
hLineWidth: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 2 : 2;
},
vLineWidth: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 2 : 2;
},
hLineColor: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';
},
vLineColor: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
},
}
}

};Var dd = {

pageOrientation: 'landscape',
pageSize: 'A3',
pageMargin: [0, 0],
content: page

};

Answer 1

也可以这样做:

layout: {
hLineWidth: function() {
// Here you can use ternary operator or if condtions to change its value according to row and column
return 0;
},
vLineWidth: function() {
// Here you can use ternary operator or if condtions to change its value according to row and column
return 0;
}
}