2 Replies Latest reply: Jan 29, 2018 3:36 AM by Xavier Garcia RSS

    How to export Sense mashup objects to images.

    Fei Xu

      Hi,

      After putting Sense objects into mashup, I want to be able to right click the objects and then save them as images.

       

      It is strange that I can only do that to pie charts.

       

      For bar charts, I can only right click and save the legends as images.

       

      If I right click the bar chart body, I see different options and I can't save it to images:

      For table charts, I cannot save it as images at all.

       

      I am not sure why to different objects, when I right click them, I have different options...

       

      Can anyone provide any help please? If it is doable using API, how can I start with?

       

      Thanks

       

      Fei

        • Re: How to export Sense mashup objects to images.
          Xavier Garcia

          Hello xufei123,

           

          Let me explain you what i got from the same issue long time ago.

           

          Current Qlik Sense API does not provide an export image functionality as it does with exportData method which only exports data in table format. If you want to create a similar functionality as in the hub you will l need to:

          1. Create the functionality that gets a specific screenshot of your chart.

          2. Create a right click menu (most probably will override the default right click functionality of browsers).

           

          As per the first point, I achieved to get a snapshot of the visualization by using html2canvas. Look around for some basic examples. See the behavior below:

           

          app.obj.app.getObject(value.firstChild.id).then(function(model) {

               // Get object

               var qObject = document.getElementById(model.id);


               // Transform qObject to canvas

               html2canvas(qObject, {

                   onrendered: function(canvas){

                        // Download in png format

                        // .empty is a html class that will render the canvas of your object into the <div> tag

                        angular.element('.empty').attr('href', canvas.toDataURL("image/png"));

                        // give the file a name

                        angular.element('.empty').attr('download', 'test');

                        angular.element('.empty')[0].click();

                     }

                });

                app.obj.qlik.resize();

          });

           

          As per the second point, you can look around an easily find some examples on right click menus using javascript. Myself, I created a dropdown menu to let the user choose whether to download a screenshot of the chart or download the data in csv format. That way, I was not overriding any right click functionality. Also, one of my requirements was to use the dashboard on a touchable screen.

           

          Hope this helped you :-)

          Regards,