pdfmake js 有问题。 Table 边框不工作

having problem with pdfmake js . Table border not working

我正在尝试以 table 布局打印发票。在 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

};

也可以这样做:

    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;
        }
    }