Skip to Content

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 = window.open(”, ‘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>”;

                        newWin.document.write(topDoc);

                        newWin.document.write(metaDoc);

                        newWin.document.write(“<body>”);

                        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.write(svgStr);

                        newWin.document.write(endDoc);

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

                        newWin.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…

To report this post you need to login first.

3 Comments

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

  1. Christian C.

    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!

    (0) 
  2. Marius Stoica

    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?

    Thanks,

    Marius

    (0) 

Leave a Reply