Hi ,
through this post i would like to share how to create a simple report(like crystal/xcelcius) through SAP UI5 using javascript

Architecture

Scenario : Build a report including a chart and detailed data(which is used to populate the chart)

Step 1 : Create a dataURL of the div

We know in sap ui5  we can create element with id which is registered into framework . We can call them by using sap.ui.getCore().byId() or using document.getElementById() which will return the respective div element .

Now we will try to create a html canvas from a div (this will give additional control). In my case i have used html2canvas js library .

html2canvas([document.getElementById(‘id’)], { //id is the charts id say

                onrendered: function (canvas) {          //once the div is rendered then only process

                    var imageData = canvas.toDataURL();

                    }})


this(imageData ) will give me  the div element’s  image in dataURL format which will be used to push the image into a document(say pdf).

Step 2 : Create a pdf using the  third Party tools (jsPDF) to create PDF  .


Now you can push whatever you want into the PDF .

Example : –

var doc = new jsPDF();

        doc.setFont(“times”, “italic”) ;

        doc.rect(5, 5, 200, 280) ;

   

        doc.setTextColor(0,175,200) ;

        doc.text(90, 15, ‘Demo’);

   

        doc.setTextColor(0,0,0) ;

        doc.setFontSize(10) ;

        doc.text(10, 25, ‘Demo report’);

        doc.addImage(imageData, ‘PNG’, 25, 75, 150, 80);


You can also add tables and populate data into it (everything in js)

please refer : – JsDoc Reference – jsPDF  for jsPDF syntax


by this this time you will have a PDF created you need to download . So you can add a button and attach the following code in  the controller


downlaod :

            var file = ‘demo’;

            doc.save(file + ‘.pdf’);

This will download the PDF file with an image and few texts.

         



To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Ginwene Rueda

    Hi Pinaki,

    Have you tried generating PDF files using VizFrame Graphs (Column and Combination)? Coz I tried rendering canvas elements using html2canvas.js but the output is just a blank image.

    Thanks,

    Gin

    (0) 

Leave a Reply