Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

Not applicable

Capture Image of Mashup in Web Application

Hi All,

I currently use version 2.1 of qliksense both desktop and server version. I however want to be able to capture graphs rendered in my webpage. Qliksense mashup does not allow a "save as" image option in the web page, so I would like suggestions on how to go about this.  My idea is to click on a button that captures this graph as an image and download to user's desktop. I have tried to use html2canvas but it does not work.

Tags (2)
15 Replies
Employee
Employee

Re: Capture Image of Mashup in Web Application

Hi Adekunbi,

I just posted a blog post addressing this today. Capturing Image of Qlik Sense Objects in Mashups Hope it helps!

Not applicable

Re: Capture Image of Mashup in Web Application

Hi Francis,

Thanksssssss so much for this. However I am still not able to use it. Once I call th qBlob in the js file, the mashup doesn't show up at all. I don't know why. Also I noticed this is used for just one object, in a scenario where I have multiple objects on a page, how do I capture that? The way I communicate with my mashup is somewhat different with your example. I have my html files where this object exist, I then call the html file as an object in an external .php file. So in essence on a mashup page, I usually have like 3 different objects showing at a go. Just like the image I posted here.

mashup.png

Thanks and looking forward to here from you.

Employee
Employee

Re: Capture Image of Mashup in Web Application

Hi Adekunbi,

So two different problems you state, I'm going to address them separately.

First thing first, getting it working at all. So if when you try to load the qBlob.js in, your entire mashup stops working, it's likely not loading in correctly, and causing errors since it's not loading correctly. Can you ensure that -

1. the folder containing all the qBlob stuff is located somewhere on your server.

2. the path to the qBlob qBlob.js file is included in your require statement ( like so - require( ["js/qlik", "./qBlob/qBlob.js"], function ( qlik, qBlob ) ..... I use the path "./qBlob/qBlob.js" which with the dot-slash ends up pointing back to wherever my require.config baseurl is pointing to. I'm guessing this may be your problem, as it sounds like you may not have the qBlob folder, and the rest of your assets on the same server as what require.config baseurl points to, which is where the Qlik Engine is) The easiest way to make sure that the filepath is correct is to just include the absolute path to wherever you have the file hosted, ex. "http://www.yourwebsite.com/assets/qBlob/qBob.js".

3. If you are sure that you have the folder being hosted somewhere, and that you're using the correct filepath when loading it in the require statement, then check the browser console for any other errors.

As far as saving an entire page instead of a single chart, that part is easy! So we want to make a call similar to this on a button click or whatever user action you want - qBlob.saveToFile('QV01', 'myFile.png');  The first parameter can be any element ID you want to save, so if you wanted to save the entire body, for instance, you could just call qBlob.saveToFile('main', 'page.png'); assuming that your body html element had an id='main'

Let me know if that works.

Not applicable

Re: Capture Image of Mashup in Web Application

Thanks so much for the reply. I think I have the qblob folder in the correct position. However I have attached images of where I kept the folder in my mashup folder and how I referenced it in the code. I have also tried the absolute path option, but it still doesn't work. I have used console to check the error it says can't load script.

qblobcode.pngqblobImage.png

Employee
Employee

Re: Capture Image of Mashup in Web Application

Hey Adekunbi,

Hmmm...let's try this. I'm gonna give you the path to a version I have hosted up, just for testing purposes. If this works, than we know it's something with the path. It's http://webapps.qlik.com/qBlob/qBlob/qBlob.js, so your require statement should look like require( ["js/qlik", "http://webapps.qlik.com/qBlob/qBlob/qBlob.js"], function ( qlik, qBlob ) {

Not applicable

Re: Capture Image of Mashup in Web Application

Yes it worked. So meaning I haven't got the path right then, please help out. Thanks. I have not tried the saving part of it, but the graph loaded correctly.

Not applicable

Re: Capture Image of Mashup in Web Application

So I have tried to save an image and it doesn't work. I checked the console and I get this

Uncaught TypeError: Cannot read property 'length' of null

window.html2canvas @ html2canvas.js:601qBlob.saveToFile @ qBlob.js:6(anonymous function) @ Dashboard.js:60_.event.dispatch @ require.js:37q.handle @ require.js:36

Employee
Employee

Re: Capture Image of Mashup in Web Application

Cannot read property length of null most likely means that the id you entered in the method call does not exist.

Employee
Employee

Re: Capture Image of Mashup in Web Application

Try this path -  qBlob/qBlob.js  so require statement would look like

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