Skip to Content
Author's profile photo Former Member

Preview & Print of SAPUI5 viz charts

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…

Assigned tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

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

      Author's profile photo Marius Stoica
      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

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      adding the below will set a content padding while printing.

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

       

      Sreehari