Skip to Content
Author's profile photo Srikanth KV

UI5/FIORI Chart download as PDF

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.

Github repository

UI5 Sample code output:

PDF output:

 

Update:

Error:

If you see this error when executing the code, it is caused by UI5 library when genearting the SVG string for chart legend using method [exportToSVGString()]

One of the generated SVG attribute value has space, that is causing the issue
<g class="v-legend-element v-legend-item" transform="translate (-5,0)">
<!--attribute value "translate (-5,0)" should not contain spaces -->

This issue is fixed in App.controller.js where the space is removed.

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Muhsin Panakkal
      Muhsin Panakkal

      Hai Srikanth KV,

      Thanks for your blog, I tried the same. but I am getting the error for the below code.

      canvg(oCanvasHTML, sSVG);
      Please help me to resolve the same.
      Thanks,
      Muhsin
      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      what is the error you are getting? Can you share your code in plunker?

      Author's profile photo Muhsin Panakkal
      Muhsin Panakkal

      please find the below error.

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      Seems to be an issue with canvg library. Share your code so that I can check.

      Author's profile photo Muhsin Panakkal
      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

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog 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)

      Author's profile photo Muhsin Panakkal
      Muhsin Panakkal

      Dear  Srikanth KV,

      I got the issue, the issue is because of library missing, can u help me to add the library in component.js..?

      Thanks,

      Muhsin

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog 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

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Srikanth,

       

      I am getting the same error. Here is my manifest.json. Can you please help.

      {
      "_version": "1.8.0",
      "sap.app": {
      "id": "com.test.ChartToPDFSample",
      "type": "application",
      "i18n": "i18n/i18n.properties",
      "applicationVersion": {
      "version": "1.0.0"
      },
      "title": "{{appTitle}}",
      "description": "{{appDescription}}",
      "sourceTemplate": {
      "id": "ui5template.basicSAPUI5ApplicationProject",
      "version": "1.40.12"
      },
      "dataSources": {
      "init_data": {
      "uri": "model/Data.json",
      "type": "JSON"
      }
      }
      },
      "sap.ui": {
      "technology": "UI5",
      "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
      },
      "resources": {
      "js": [{
      "uri": "libs/canvg/canvg.js",
      "name": "canvg.js",
      "version": "1.5"
      }, {
      "uri": "libs/canvg/canvg.min.js",
      "name": "canvg.min.js",
      "version": "1.5"
      }, {
      "uri": "libs/jspdf/jspdf.debug.js",
      "name": "jspdf.debug.js",
      "version": "1.4.1"
      }, {
      "uri": "libs/jspdf/jspdf.min.js",
      "name": "jspdf.min.js",
      "version": "1.4.1"
      }]},
      "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
      },
      "supportedThemes": ["sap_hcb", "sap_belize"]
      },
      "sap.ui5": {
      "rootView": {
      "viewName": "com.test.ChartToPDFSample.view.Main",
      "type": "XML"
      },
      "dependencies": {
      "minUI5Version": "1.30.0",
      "libs": {
      "sap.ui.layout": {},
      "sap.ui.core": {},
      "sap.m": {}
      }
      },
      "contentDensities": {
      "compact": true,
      "cozy": true
      },
      "models": {
      "i18n": {
      "type": "sap.ui.model.resource.ResourceModel",
      "settings": {
      "bundleName": "com.test.ChartToPDFSample.i18n.i18n"
      }
      },
      "": {
      "type": "sap.ui.model.json.JSONModel",
      "dataSource": "init_data"
      }
      },
      "resources": {
      "css": [{
      "uri": "css/style.css"
      }]

      },
      "routing": {
      "config": {
      "routerClass": "sap.m.routing.Router",
      "viewType": "XML",
      "async": true,
      "viewPath": "com.test.ChartToPDFSample.view",
      "controlAggregation": "pages",
      "controlId": "idAppControl",
      "clearControlAggregation": false
      },
      "routes": [{
      "name": "RouteMain",
      "pattern": "RouteMain",
      "target": ["TargetMain"]
      }],
      "targets": {
      "TargetMain": {
      "viewType": "XML",
      "transition": "slide",
      "clearControlAggregation": false,
      "viewName": "Main"
      }
      }
      }
      }
      }

       

      Regards,

      Karan

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      If your UI5 version is 1.40.12 as specified in manifest.json then name space should be 'sap.ui5' instead of 'sap.ui'. After changing this also nothing is working then can you check in the network tab(F12) to see if the libraries mentioned in Manifest.json is loaded or not

      SAP UI5 version 1.40.12 manifest.json properites

      Author's profile photo Karan Bahl
      Karan Bahl

      Srikanth,

      The libraries were loading in network tab and also I have again changed the code as suggested by you. I am getting this error now; What could be the issue?

       

      Author's profile photo Syed Omer Hussain
      Syed Omer Hussain

      I am stuck with the same issue !

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      I have updated the blog with new changes to resolve this bug. Please check

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      I have updated the source code to use manifest.json and component.js. Please check now

      Author's profile photo Karan Bahl
      Karan Bahl

      Thanks for the update Srikanth; Now I am able to download the pdf.

       

       

      Author's profile photo Sambhav Tripathi
      Sambhav Tripathi

      Thanks a lot Srikanth for this blog.

      I tried the same, PDF is getting downloaded and is opening in browser.
      But When I try to open using Adobe PDF (Default) reader, it's giving Error.
      "Problem reading this document (110)"
      Did anyone got the same issue ? or any one can help on how to fix this.

      Thanks in Advance !

      Regards

      Sambhav

      Author's profile photo Sambhav Tripathi
      Sambhav Tripathi

      Hello All,

      Found solution for mentioned issue.
      It may be due to jsPDF library version as mentioned here :

      https://stackoverflow.com/questions/40939472/jspdf-saved-file-locally-gives-document-110-error-with-acrobat

      For my solution I used jsPDF library version "1.2.61".

      And it worked !!

      Regards

      Sambhav

      Author's profile photo Ramzi Ben Abdallah
      Ramzi Ben Abdallah

      Hi,

       

      Thanks for this blog it's really helpful.

       

      I was wondering if there is another solution without using  canvg library ?

       

      Thanks in advance,

      Ramzi

      Author's profile photo Srikanth KV
      Srikanth KV
      Blog Post Author

      Hi,

      I guess canvg library is used internally by SAP UI5 library. Only jsPDF library might be required.

      I need to update the blog with new source code.

       

      Regards

      Srikanth

      Author's profile photo pragnesh dineshbhai
      pragnesh dineshbhai

      Hi Srikanth,

       

      I have a big chart and it is possible to export in pdf.. I have a chart field of at least 250. I had tried but only one screen print it possible. but I need to pdf on the second page also.

      Thanks,

      Pragnesh