Skip to Content
Author's profile photo Pinaki Patra

Reporting in Sap UI 5

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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Ginwene Rueda
      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.



      Author's profile photo Pinaki Patra
      Pinaki Patra
      Blog Post Author

      How are you generating the PDF file . . . any third party ?