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