Skip to Content

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.


To report this post you need to login first.


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

  1. Former Member

    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.




Leave a Reply