jsreports home

Bank Statement

This report shows how to use the ReportBuilder API to define a report, then fill it with ad hoc JSON data defined on the client in JavaScript.

The report is rendered into a <div> container below. Click the button to generate a PDF entirely in the browser.

Source code snippets are shown below. View the source of this page for the full code.


The code:

var dataSources = [{
    "id": "account_detail",
    "name": "Account Detail",
    "data": [{
        "accountHolder": "John Q. Public",
        "accountNumber": "Z04-20049713",
        "accountValue": 9040.17,
        "freeCredit": 7482.57,
        "startDate": new Date(2015, 11, 1),
        "endDate": new Date(2015, 11, 31),
        "netChange": -194.64,
        "changeItems": [{
            "category": "Beginning Account Value",
            "description": "",
            "currentPeriod": 9234.81,
            "ytd": 0
        },{
            "category": "Additions",
            "description": "Exchanges In",
            "currentPeriod": 0,
            "ytd": 10000
        },{
            "category": "Subtractions",
            "description": "Transaction Costs & Fees",
            "currentPeriod": 0,
            "ytd": -28.54
        },{
            "category": "Change in Investment Value",
            "description": "",
            "currentPeriod": -194.64,
            "ytd": -931.29
        }],
        "holdings": [{
            "name": "Core Account",
            "amount": 7482,
            "color": "#E0E0E0"
        },{
            "name": "Stocks",
            "amount": 1557,
            "color": "#9CCC65"
        }],
        "incomeItems": [{
            "category": "Taxable",
            "description": "Interest",
            "currentPeriod": 0.06,
            "ytd": 0.31
        }]
    }]
}];
    
var report = jsreports.createReport('Bank Statement')
    .data('account_detail')
    .page(11, 8.5, 'inches')
    .margins(0.5)
    .header(1.25)
        .image('images/magnifibank-logo.png', 0, 0, 2.5, 1)
        .text('Account Summary', 5.25, 0.15, 4.75, 0.2, { 
            bold: true, align: 'right', fontsize: 13 
        })
        .text('[=FORMAT(startDate, \'mmm d, yyyy\')] to [=FORMAT(endDate, \'mmm d, yyyy\')]', 5.25, 0.4, 4.75, 0.2, { 
            align: 'right', fontsize: 13 
        })
    .detail(5.5)
        .text('Account Value:', 0, 0, 2.5, 0.5, { fontsize: 15 })
        .text('[accountValue]', 2.5, 0, 2.25, 0.5, { 
            fontsize: 15, bold: true, pattern: '$#,##0.00', align: 'right' 
        })
        .text('Change in Account Value', 0, 0.75, 2.5, 0.5, { 
            fontsize: 14, text_color: '#777'
        })
        .text('[netChange]', 2.5, 0.75, 2.25, 0.5, { 
            fontsize: 14, align: 'right', pattern: '$#,##0.00;($#,##0.00)', 
            text_color: '#777', bold: true
        })
        .table(0, 1.25, 4.75, 2.5, { data: 'changeItems', hasFooter: true, 
            groupBy: 'category', fontSize: 9, hideRowWhenExpr: '!description' 
        })
            .column('50%', '   [description]', '', '', { 
                align: 'left', group0Header: '[category]' })
            .column('25%', '[currentPeriod]', 'This Period', '[SUM(currentPeriod)]', { 
                align: 'right',
                detailStyle: {
                    pattern: '#,##0.00'
                },
                group0Header: '[SUM(currentPeriod)]',
                group0HeaderStyle: {
                    pattern: '#,##0.00'
                }
            })
            .column('25%', '[ytd]', 'Year-to-Date', '[SUM(ytd)]', { 
                align: 'right',
                detailStyle: {
                    pattern: '#,##0.00'
                },
                group0Header: '[SUM(ytd)]',
                group0HeaderStyle: {
                    pattern: '#,##0.00'
                }
            })
        .text('Free Credit Balance', 0, 3, 2.25, 0.2, { fontsize: 11 })
        .text('[freeCredit]', 3, 3, 1.75, 0.2, { 
            align: 'right', pattern: '$#,##0.00', fontsize: 11 
        })
        .text('Account # [accountNumber]', 5.25, 0, 4.75, 0.2, { 
            bold: true, align: 'right', fontsize: 13 
        })
        .text('[accountHolder] - INDIVIDUAL', 5.25, 0.25, 4.75, 0.2, { 
            bold: true, align: 'right', fontsize: 13 
        })
        .text('Account Holdings', 5.25, 0.75, 4.75, 0.25, { fontsize: 13 })
        .chart('pie', 5.25, 1, 4.75, 2, { data: "holdings" })
            .series('amount', 'name', 'color')
        .table(5.25, 3.25, 4.75, 1.5, { data: 'holdings', hasFooter: true, fontSize: 9 })
            .column('50%', '[name]', 'Holding Type', '', { align: 'left' })
            .column('25%', '[amount]', 'Value', '[SUM(amount)]', { 
                align: 'right', 
                detailStyle: { pattern: '#,##0' },
                footerStyle: { pattern: '#,##0'
            } })
            .column('25%', '[=amount / SUM(\'amount\')]', 'Percent of Account', '100%', { 
                align: 'right', 
                detailStyle: { pattern: '0%' }, 
                footerStyle: { pattern: '0%' } 
            })
        .text('Please note that due to rounding, percentages may not add to 100%.', 
            5.25, 4.5, 4.75, 1, { fontsize: 10, wrap: true })
        .text(['Important disclosures: Past results do not guarantee future',
            'returns.  All investments involve risk.'].join(' '),
            0, 3.5, 4.75, 1, { fontsize: 10, wrap: true })
        .text('Income Summary', 0, 4.5, 4.75, 0.5, { fontsize: 13 })
        .table(0, 4.85, 4.75, 1, { data: 'incomeItems', 
            groupBy: 'category', hasFooter: true, fontSize: 9 })
            .column('50%', '   [description]', '', '', { 
                align: 'left', group0Header: '[category]' })
            .column('25%', '[currentPeriod]', 'This Period', '[SUM(currentPeriod)]', { align: 'right', footerStyle: { pattern: '$#,##0.00' } })
            .column('25%', '[ytd]', 'Year-to-Date', '[SUM(ytd)]', { align: 'right', footerStyle: { pattern: '$#,##0.00' } })
    .pageFooter(0.5)
        .text('Page 1 of 1', 9, 0.5, 1.5, 0.25, { fontsize: 10, italic: true })
    .done();

jsreports.render({
    report_def: report,
    target: $(".report-output"),
    datasets: dataSources,
    showToolbar: false,
    scaleFonts: true
});

$('.generate-pdf').on('click', function() {
    jsreports.export({
        report_def: report,
        format: 'pdf',
        datasets: dataSources
    });
});