Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Active Participant

SAPUI5 viz library provides us with a wonderful collection of HTML5 charts which are intuitive, rich and very responsive, but however in the standard offering it lacks the support for preview and print feature of the viz component.

This post describes a generic way of getting this to work. From the rendered viz chart, we extract the svg element that forms the chart, clone it and add it to a new HTML window/document. This does the magic for us.

Here we have a button and on its press action we have associated the logic for generating the preview and print of the chart. Code for the same is given below:

function previewprintChart() { //This method is the press handler for a button in the page that has the viz chart, or it could be some menuitem in the page.

var features = "";// You could provide features for the new window

                        var newWin ='', 'newWin', features);

                        var topDoc = "<html><head><title>Print Preview</title>";

                        var metaDoc = "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta charset=\"UTF-8\"> </head>";

                        var endDoc = "</body></html>";




                        var s = new XMLSerializer();

                        var svg = $('#content’).find('.v-m-root')[0]; //where content is the DIV id of the viz chart

                        var svgPrint = svg.cloneNode(true);        

                        var svgStr = s.serializeToString(svgPrint);



                        newWin.document.close();//make html available for print



I guess there could be other ways of doing this probably better ways too, if so please share.

Hope this helps somebody!

Thanks for reading...

Former Member
0 Kudos

This is a real good function, easy to understand and easy to use.

Adding a table with Details on the Chart below the SVG would be the deluxe Version, but it works perfect!

Thanks alot!

Active Participant
0 Kudos

Thanks for reading through.. !! :smile:   And yes, you are right a table with the chart details would be just even better.

Active Participant
0 Kudos

Hi Ria,

Have you tried to print on a mobile device ? I'm using Cordova plugins, and I can't make it (printing) work from inside the app.

Any ideas?



Active Contributor
0 Kudos
adding the below will set a content padding while printing.

newWin.document.write('<body style="zoom: 70%">');