Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
Francis_Kabinoff
Former Employee
Former Employee

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 -

require_include.png



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.


44 Comments
mmonfort
Creator
Creator

Nice - I'm definitely trying to hack this feature in for now so quick and dirty is completely fine.

This fix works - I just need to figure out how to make it not stretch when i'm using charts that only take 6 of the 12 columns

Screenshot 2016-09-08 01.13.02.png

Appreciate if you know how to fix this but all good if you don't have time now - you've been plenty helpful anyway and I can dig around tomorrow.

cheers

0 Likes
1,024 Views
mmonfort
Creator
Creator

Gotta love a bit of inspiration at the breakfast table before work...

So the solution you have is fine if the image goes the full column (12) length of the page

If someone has only 50% like in my situation (I have charts side by side), then they just need to add a width function to set it to 50% width then back to 100%

eg.

$("#saveqv03").click(function(e) {

   e.preventDefault();

   $("#QV07").css({position: "fixed", top: "0", left: "0", width:"50%"}); //this line sets to fixed

   qBlob.saveToFile('QV07', 'qv07.jpg');

   $("#QV07").css({position: "relative", width:"100%"}); //this line sets it back

  });

Seems to work fine so far (but for some reason just not in Safari, will test other browsers)

0 Likes
1,024 Views
Not applicable

Works like a charm, thanks for the solution Francis.

I do have 1 major problem: the image is blurry, like it's out of focus, even though it looks fine on screen. Do you maybe have any suggestions what might be the problem?

0 Likes
1,024 Views
Not applicable

I had the same problem with the blurry image, I kinda solved it, but it works only for some kind of objects, not for all of them. I uploaded the code on github: https://github.com/cristiandan/qlik-export

The repository has the code from Francis, but I used a different library to export the objects to image. One that does higher res.

If it helps please star the repo.

0 Likes
1,024 Views
Anonymous
Not applicable

Hi Francis , qBlob does not work in Firefox. There is error from html2canvas.js. Although tried the new version of html2canvas.js, still does not work.

Any suggestion? Thanks!

0 Likes
1,024 Views
Francis_Kabinoff
Former Employee
Former Employee

Hmm...I don't have time to look at it at the moment, but I did a quick google search and found this javascript - html2canvas conflict in mozila firefox - Stack Overflow

0 Likes
1,024 Views
Anonymous
Not applicable

Nice Post fka‌ is there an option to export to PDF.

977 Views
Francis_Kabinoff
Former Employee
Former Employee

So check out the qBlob.js file. Currently, the qBlob.saveToFile method takes takes the html object, converts it to canvas, converts the canvas to a blob, and then the blob can be stored. But I think in order to store it as a pdf you'd need to add another piece, something like jsPDF - HTML5 PDF Generator | Parallax.

0 Likes
977 Views
Anonymous
Not applicable

Thanks Francis, we had tried qBlob.js we found that its only for image--> but we will try jsPDF as well.

Another issue i see is that its only for single image what if i want to captue complete mashup which has a scroll(multiple pages).

0 Likes
977 Views
Francis_Kabinoff
Former Employee
Former Employee

You can actually set it on any element, so a container element containing everything you want to capture, for example. But it does not recognize stuff outside of current view, so anything that needs to be scrolled to will not be captured. You can try the zoom out feature of your browser, that may allow you to capture more, but I haven't tested it, so I'm not certain.

0 Likes
977 Views