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

[Francis_Kabinoff]

yea no prob. hmm. i'd still bet it's a path issue, just not sure what. you getting any error in console?

[mmonfort]

Hi Francis - as you can see I have the folder structure set up like this:

and my JS code is like this:

require( ["js/qlik", "./qBlob/qBlob/qBlob.js",], function ( qlik, qBlob ) {

  qlik.setOnError( function ( error ) {

  alert( error.message );

  } );

So the pathway looks right to me.

When I try to load my app, I get my modified rain load animation and the structure of the site showing however the charts don't show

When I remove the ./qBlob/qBlob/qBlob.js it works again.

[Francis_Kabinoff]

Are the files loading? Check the network tab in chrome dev tools

[mmonfort]

Thanks Francis, I'm a html newbie so didn't know I could check the files loading.

I am getting this result:

[Francis_Kabinoff]

cool no problem. so you're getting 404, that's file not found. that means it is a path problem as we suspected. we need to see what path it's trying to load from, the easiest place is the console, which is also in dev tools. see my screenshot below. once we know what path its trying to load from, we can compare that to the path the file is actually at, and figure out how we need to adjust. check out the screenshot below, try to find your console and find a similar error message to what my mouse pointer is pointing at. i'm signing off for the night but i'll get back to any responses in the morning.

[mmonfort]

It's coming through here:

[Francis_Kabinoff]

Nice job. you were doing it right, the path is correct, but i see now why it's not finding it. the repository simply isn't serving the files. Looks like we can't just drop files into the repository folder and expect them to be served.

Just add a file to your mashup from the dev-hub, and copy and paste the code from the qBlob.min.js file I just attached to the blog post into your new file. Name it whatever you like, and then load that with require. That make sense?

[mmonfort]

Thanks Francis!

I got it working now:

But when I click on the save image option the colours are gray in the background - am sure it's something I could just tweak in your .js file:

anyway I will keep playing but this was a big step! Thanks for your help and for staying up late to do so

[mmonfort]

Francis, sorry to bombard you with comments but this solution is great. The only thing I need to figure out is how to set the background color to be white when I save it as a PNG.

I un-minified your .js code and found the code for ..... backgroundColor").isTransparent() ...

I was not sure what to change it to though - I saw a whole heap of color variables further down but not sure how to use this in the background color code. Could you please advise?

Thanks again for your help!

[Francis_Kabinoff]

Hmm that's interesting...I don't think you should need to change anything in the code to change the background color, it should pick up the background of the element you pass in. Try setting the background color of the element you pass in to white.