PDFMake.js - Reciept Markup

receipt.js

// Reciept markup
// Author: Sebin P Johnson
// http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd


var recieptObject = {
    recievedFrom: "Super Big Payee Name",
    date:'1/2/2018',
    recieptNumber : '#123456',
    amountPaid : '$1000',
    receiptFor : 'Topup of card No.1234-1234-1234',
    currentBalance : '$3000',
    paymentMethod : 'Cash'
}

var dd = {


    content: [
        // Header
        {
            columns: [
                [{
                        text: 'Cash Reciept',
                        style: 'companyTitle',
                        width: 500,
                        alignment: 'left'
                    },

                ],

                [

                    {
                        stack: [{
                                columns: [{
                                        text: 'Reciept Number :',
                                        style: 'invoiceSubTitle',
                                        width: 185

                                    },
                                    {
                                        text: recieptObject.recieptNumber,
                                        style: 'invoiceSubValue',
                                        width: 70

                                    }
                                ]
                            },
                            {
                                columns: [{
                                        text: 'Date :',
                                        style: 'invoiceSubTitle',
                                        width: 185
                                    },
                                    {
                                        text: recieptObject.date,
                                        style: 'invoiceSubValue',
                                        width: 70
                                    }
                                ]
                            }
                        ]
                    }
                ],
            ],
        }, {
            text: [{
                text: 'Recieved From '
            }, {
                text: recieptObject.recievedFrom,
                style: 'boldDetails'
            }, {
                text: ' The amount of '
            }, {
                text: recieptObject.amountPaid,
                style: 'boldDetails'
            }, {
                text: ' for '
            }, {
                text: recieptObject.receiptFor,
                style: 'boldDetails'
            }],
            style: 'recieptParagraph'
        }, {
            columns: [
                [{
                    stack: [{
                        columns: [{
                                text: 'Current Balance    :',
                                style: 'accountBalances',
                                width: 110

                            },
                            {
                                text: recieptObject.currentBalance,
                                style: 'accountBalancesDetails',
                                width: '*'

                            }
                        ]
                    }, {
                        columns: [{
                                text: 'Payment Amount  :',
                                style: 'accountBalances',
                                width: 110

                            },
                            {
                                text: recieptObject.amountPaid,
                                style: 'accountBalancesDetails',
                                width: '*'

                            }
                        ]
                    }]
                }], {
                    text: ['Payment Method : ', {
                        text: recieptObject.paymentMethod,
                        style: 'paymentMethodBold'
                    }],
                    style: 'paymentMethod'
                }
            ],
            style: 'accountsSection'
        }, {
	        columns: [
	            {
	                text:'Recieved By',
	                alignment:'right'
	            },
	            {
	                stack: [
	                    { 
	                        text: '_________________________________',
	                    }
	                    ],
	               width: 180
	            },
	        ],
	        style:'recievedBy'
	    },

    ],
    styles: {

        companyTitle: {
            fontSize: 30,
            bold: true,
            alignment: 'center',
            margin: [0, 0, 0, 15]
        },
        invoiceSubTitle: {
            fontSize: 12,
            alignment: 'right'
        },
        invoiceSubValue: {
            fontSize: 12,
            bold: true,
            alignment: 'left'
        },
        center: {
            alignment: 'center',
        },
        boldDetails: {
            bold: true,
            fontSize: 16,
            decoration: 'underline'
        },
        recieptParagraph: {
            fontSize: 15,
            margin: [0, 10, 0, 0]
        },
        accountsSection: {
            margin: [0, 50, 0, 0]
        },
        accountBalances: {
            fontSize: 13,
            alignment: 'left',
        },
        accountBalancesDetails: {
            bold: true,
            fontSize: 13,
            alignment: 'left',
            decoration: 'underline'
        },
        paymentMethod: {
            width: '*',
            alignment: 'right'
        },
        paymentMethodBold: {
            bold: true,
            decoration: 'underline'
        },
        recievedBy:{
             margin: [0, 10, 0, 0]
        }
    },
    defaultStyle: {
        columnGap: 10,
    },
    pageSize: {
        width: 600,
        height: 300
    }
}