#javascript #pdf #pdfmake
Вопрос:
Я пытаюсь распечатать счет-фактуру в виде таблицы . Документ отлично просматривается на игровой площадке pdfmake, но когда я открываю документ на сайте, он не поддерживает свойство границы. Отображаются все границы . Я хочу, чтобы документ был таким же, как на игровой площадке. Также, когда я пытаюсь направить печать с помощью функции 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
};