Capturing Image of Qlik Sense Objects in Mashups

[Francis_Kabinoff]

A community user recently asked if there was any way to capture images of Qlik Sense objects in mashups and save to disk.  So the idea is, a user is using your mashup, makes some selections, finds some cool insights, and wants to save an image of the charts or objects in the mashup.

This is a bit tricky with the current browsers, but I've put together a solution that I've tested on newer versions of IE, Firefox, and Chrome, which works well. I'm going to attach it to this post, and walk you through using it.

The first thing you'll want to do is download the qBlob.zip file that's attached to this post. Then unzip it and place the qBlob folder in your mashup folder, which can be located at C:\Users\<username>\Documents\Qlik\Sense\Extensions\<mashup name> on Qlik Sense Desktop. If you are using Qlik Sense server, you will need to serve the files some way.

Then you'll need to include the qBlob.js in your mashup .js file, like so -

Once it's included, all you need to do to use it is call the following function, replacing <objId> with the ID of the container element of the Qlik Sense object, which you most likely also used in the app.getObject() method, and replace <output filename> with a filename you wish to output to. The filename requires a type, such as .png or .jpg.

qBlob.saveToFile(<objId>, <output filename>);

In the mashup I built to test the functionality, I attached the above function call to a click handler on an anchor element, like so -

$("a").click(function(e) {
   e.preventDefault();
   qBlob.saveToFile('QV01', 'mychart.jpg');
  });

You can take a look at this in action here - qBlob Test

I've attached my entire mashup folder that's linked to above, as well as just the qBlob folder that you'll need to do this in your own mashups.

qBlob.zip

blob-test.zip

[lmcbasher]

Does anyone have a problem exporting maps with the above methods? When we export the image we get the data layer but not the map background. Running Sense Sept 2017 and using the HTML2Canvas and blob. Thanks.

[tchoujar]

Hi

I am trying to do the same through your code. Please find my snippet below:

*************factory code*******************

var qBlobMod = angular.module('qBlobMod', []);

qBlobMod.factory('qBlobFactory', function ($rootScope, $timeout) {

var factory = {};

factory.saveToFile = function(obj, filename) {

html2canvas(document.querySelector('#'+obj), {

onrendered: function(canvas) {

canvas.toBlob(function(blob) {

saveAs(blob, filename);

});

}

});

}

return factory;

});

****************jscode*********************

$scope.test = function(e){

   e.preventDefault(); 

      $scope.qBlob.saveToFile('myId', 'mychart.png'); 

   }

The problem that I am facing is that I do get an image of the qlikObject (#myId) but sometimes it doesn't appear complete sometimes I get a blank image,

Complete Image -----

Sometimes I get just this

Or a blank image. Dont know the reason. Please let me know if anyone was able to resolve it.

[tauceef9]

Hi Francis,

Thanks a lot for your post. I am able to download images but getting issues with extensions. It is working fine with Qlik charts but when I am using "AM Combo" chart, only half image is getting downloaded(attached for reference).

Would you please help me resolving this issue.

Regards,

Tauceef

[madhulatha]

This solution to export PDF works. I was looking for this long time and found a right thread. Thanks for the clear instructions.