Skip to Content

I’m writing my first blog, hope this is informative.

Ever wondered how to save/download vizframe charts to PDF. Many times I have seen this question in UI5 forums and sometimes I used to reply like ‘save chart as SVG using builtin method’  and generate PDF.

Finally I got the same requirement from the client, and I tried to save chart as SVG. Now I have the SVG content …from here on how to proceed. There were no concrete steps to create PDF from SAP UI5 charts. So I decided to dig further and found a solution(not sure if its the best one)

 

Steps to create PDF:

We need to use third party library jsPDF to create PDF on the client side. There is an example on the first page which shows image in the PDF (this is exactly what we needed). Unfortunately jsPDF library doesn’t support for SVG content(AFAIK).

So the challenge is to convert UI5 Chart SVG content to Image(JPEG/PNG) on the client side and use the library jsPDF.

For this solution we need to use below third party libraries:

  1. jsPDF             – Used to generate client side PDF
  2. canvg             – For placing SVG content on the canvas
  3. rgbcolor          – required for canvg library
  4. StackBlur.js    – required for canvg library

 

Lets assume that we have the below stacked bar chart with id as ‘idVizFrame

 

Convert chart content to SVG using UI5 method exportToSVGString()

Use the below code:

var oVizframe = this.getView().byId("idVizFrame");        // access chart UI element
var sSVG = oVizFrame.exportToSVGString({                  // UI5 predefined method
  width: 800,
  height: 600
});

 

Steps for converting SVG to PNG/JPEG on client side:

  1. Create a canvas HTML element
  2. Place SVG content into canvas element
  3. Create dataURI for canvas element in required format

Below is the code:

var oCanvasHTML = document.createElement("canvas");        // Create canvas element
canvg(oCanvasHTML, sSVG);      // use library canvg to place SVG content on the canvas

var sImageData = oCanvasHTML.toDataURL("image/png");  // Get data URI in PNG or JPEG

 

Now we have SVG content in PNG format. Use jsPDF library to create PDF and place the image.

// Create PDF using library jsPDF
var oPDF = new jsPDF()
oPDF.addImage(sImageData, 'PNG', 15, 40, 180, 160)
oPDF.save("test.pdf");     // PDF file name

 

You can refer the sample code here.

UI5 Sample code output:

PDF output:

To report this post you need to login first.

8 Comments

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

      1. Muhsin Panakkal

        Dear Srikanth,

        Kindly find the below code.

        _handleExport : function(){
            var oVizFrame = this.getView().byId("oVizFrame");
            var sSVG = oVizFrame.exportToSVGString({
              width: 800,
              height: 600
            });
            var oCanvasHTML = document.createElement("canvas");
            //add SVG chart content to canvas using library "canvg"
            canvg(oCanvasHTML, sSVG);
            // STEP 3: Get dataURL for content in Canvas as PNG/JPEG
            var sImageData = oCanvasHTML.toDataURL("image/png");
        
            // STEP 4: Create PDF using library jsPDF
            var oPDF = new jsPDF();
            oPDF.addImage(sImageData, 'PNG', 15, 40, 180, 160)
            oPDF.save("test.pdf");	
        		}

        Thanks,

        Muhsin

        (0) 
        1. Srikanth KV Post author

          can you let me know the chart that is being displayed along with some mock data…if possible put the entire code on plunker(I know its difficult, but once the code is shared it will be easy to debug)

          (0) 
            1. Srikanth KV Post author

              You can include thirdparty JS libraries in manifest.json under name space ‘sap.ui5’.

              In SAP UI5 version 1.54 namespace is changed from ‘sap.ui5’ to ‘sap.ui’

              Documentation on manifest.json is here

              Refer this thread on how to adjust manifest.json for thirdparty libraries

              (0) 

Leave a Reply