Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 

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


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

   + '.pdf');

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


Labels in this area