In this post we are going to implement jsreports in Angula8 application. lets get started with the installation process.

Follow the link for more details:
https://www.jsreports.com/docs/getting-started/

Installation

Add the library to “index.html” page.

In component.html add div to render report output.

Next in component.ts declare jsreports.

declare var jsreports: any;

Next configure data-source.

var items = [{
        category: 'Professional Services',
        description: 'Software Development',
        unitLabel: 'Hours',
        quantity: 12,
        unitPrice: 150.00
      },{
        category: 'Expenses',
        description: 'Coffee for office',
        unitLabel: 'Qty',
        quantity: 4,
        unitPrice: 10.51
      },{
        category: 'Expenses',
        description: 'New keyboard',
        unitLabel: 'Qty',
        quantity: 3,
        unitPrice: 32.99
      },{
        category: 'Expenses',
        description: 'New Mouse',
        unitLabel: 'Qty',
        quantity: 100,
        unitPrice: 320.99
      },{
        category: 'Expenses',
        description: 'New Mouse',
        unitLabel: 'Qty',
        quantity: 100,
        unitPrice: 320.99
      }];        

var dataSources = [{
    "id": "Invoice_Data",
    "name": "Invoice Detail",
    "data": [{
        "printDate": new Date(),
        "startDate": new Date(2015, 11, 1),
        "endDate": new Date(2015, 11, 31),
        "companyInfo": "118, Dilkusha C/A, Motijheel(Level-25), Dhaka-1000",
        "userAddress": 'Dhaka-1207',
        "accountHolderId": 'AC0001',
        "vatNo":"00000000",
        "accountHolder": 'Shashangka Shekhar',
        "invoiceNumber": 'INV-00000001',
        "subTotal": '$150,450.08',
        "disctTotal": '$1000.00',
        "grndTotal": '$149,450.08',
        "taxAmount": '$0.00',
        "rptItems": items,
        "inWord": 'One Hundred Forty-Nine Thousand Four Hundred Fifty and Eight.'              
    }]
}];

Next create report.

var report = jsreports.createReport()
    .name('Invoice-' + new Date().toString())
    .data('Invoice_Data')
    .page(8.27, 11.69, 'inches')
    .margins(0.55)

    .header(0.5)
    .image('assets/magnifibank-logo.png', 0, 0, 2, 1)
    .text('[companyInfo]', 0, 0.4, 2.5, 1, { fontsize: 10, align: 'left', wrap: true })
    .text('INVOICE: [invoiceNumber]', 2.40, 0.15, 4.75, 0, { bold: true, align: 'right', fontsize: 11 })    
    .text('VAT NO:', 2.40, 0.35, 4.1, 0, { align: 'right',bold:true, fontsize: 9 })
    .text('[vatNo]', 2.40, 0.35, 4.75, 0, { align: 'right', fontsize: 9 })
    .text('Billed To:', 0, 1, 6.2, 0, { bold: true, fontsize: 13, align: 'left', underline: true })
    .text('[accountHolder]' + ', ' + '[userAddress]', 0.2, 1.2, 4.6, 0, { fontsize: 10, align: 'left' }) 
    .text('Date: ', 6.1, 1, 1, 0, { align: 'left', bold: true, fontsize: 9 })
    .text('[=FORMAT(printDate, \'mmm d, yyyy\')]', 6, 1, 1.2, 0, { align: 'right', bold: false, fontsize: 9 })
    .text('Period:', 4.25, 1.2, 0.9, 0, { align: 'right', bold: true, fontsize: 9 })
    .text('From [=FORMAT(startDate, \'mmm d, yyyy\')] To [=FORMAT(endDate, \'mmm d, yyyy\')]', 5, 1.2, 2.2, 0, { align: 'right', bold: false, fontsize: 9 })

    .footer(0.7)         
    .text('Sub-Total: ', 0, -0.15, 6.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('[subTotal]', 6.1, -0.15, 1.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('Discount: ', 0, 0.08, 6.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('[disctTotal]', 6.1, 0.08, 1.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('Vat: ', 0, 0.3, 6.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('[taxAmount]', 6.1, 0.3, 1.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('=========================', 2.40, 0.47, 4.80, 0, { bold: false, align: 'right', fontsize: 11 })
    .text('Grand-Total: ', 0, 0.65, 6.1, 0, { bold: true, align: 'right',fontsize: 11 })
    .text('[grndTotal]', 6.1, 0.65, 1.1, 0, { bold: true, align: 'right', fontsize: 11 })
    .text('In word: [inWord]', 0, 0.25, 3, 0, { bold: true, align: 'left' })

    .detail(1)
    .text('Invoice Details:', 0, 0.2, 7.2, 1, { bold: true, fontsize: 13, align: 'left', underline: true })
    .table(0, 0.5, 7.2,1, { data: 'rptItems', hasFooter: true, hasHeader: true, fontsize: 10 })
    .column('', '[description]', 'Particulars', '', { wrap: true, align: 'left' })
    .column('10%', '[quantity]', 'Qty', '', { align: 'center'}) 
    .column('12%', '[unitPrice]', 'Price', '', { align: 'right' }) 
    .column('15%', '[=quantity * unitPrice]', 'Total', '', { align: 'right' }) 
    
    .pageFooter(0.7)
    .text('Printed on: [=FORMAT(DATE(), \'dd/MM/yyyy\')]', 0, 0.4, 4.75, 0.2, { align: 'left', fontsize: 8 })
    .text('© [=FORMAT(DATE(), \'yyyy\')], All Rights Reserved.', 0, 0.55, 7.2, 0.25, { fontsize: 8, align: 'left' })
    .text('Page [PAGE_NUMBER] of [PAGE_COUNT]', 0, 0.55, 7.2, 0.25, { fontsize: 8, italic: true, align: 'right' })
    .done();

Finally render the report to the output div.

jsreports.render({
        report_def: report,
        target: $('.report-output').css('min-height', '900px'),
        datasets: dataSources,
        showToolbar: true,
        scaleFonts: false
    });

Output:

Download/clone full source code from  Hope this will help 🙂