Screen Grab Document Extension for Printing Extensions

[Brian_Munz]

So, I'm not completely sure why this is needed, but I've had a lot of people for a long time ask me if it was possible to print extensions.  As you probably know, you can't print them using the standard way offered by QlikView because they're dynamic javascript.

The other day I came across a JS library called html2canvas which scans the DOM of the page and recreates (as best it can) the HTML of that page on a <canvas> element.  So I played with it a bit and made it so it would also convert that canvas element to a PNG image that you can download and do whatever you want with (print,etc.).  It works with extensions, BUT in no way is this library perfect.

Since html2canvas uses the <canvas> element, you'll need to be running IE9 or above.  The library does what it can to convert the HTML to a canvas but it's a pretty new library and there's some things too complex for it.  For example, none of my Raphael extensions were showing up in the screen captures I created from this extension, and I guess a few people were having problems with the background image of the QVW showing up.  Like I said, this is what it is, and it's far from perfect, but hopefully it helps.

Anyway, it's pretty easy to use.  Once you install the doc extension, there will be an icon in the upper right of the QVW (in webview) next to the "+" sign:

Click that and a window will pop up underneath it showing you a preview thumbnail of the screen capture and giving you instructions on how to download the image:

Obviously telling people to hold down ctrl and shift then right clicking the thumbnail isn't ideal, but it was really the only way to do it.  It's pretty easy, just hit Save Picture As...

When you open the image you downloaded, it will be a screen capture of what you were just seeing in the QVW similar to this:

That's it.  Like I said, it's not perfect, but hopefully it helps out.

The extension is now stored on GitHub.  Click on the "Download ZIP" button for the files.

Feel free to add any updates or improvements!

brianwmunz/screenShot-QV11 · GitHub

Message was edited by: Brian Munz

[Brian_Munz]

TO have the extension target a specific object wouldn't be too difficult.  I can try to modify this extension to do that when I get some free time.    

[#3]

It would be great!

[amien]

Brian,

Just investigating the possibilities.

Would it be technically possible to, right after you click on the icon, not show the thumbmail, but go directly to one of the opties? like printing for example. So : Click icon --> Capture image --> print dialog

[rbecher]

Hi Brain,

I tried to change it to capture only $("#MainContainer") but doesn't work as an element parameter. Now I do some hides before the screenshot instead to have a proper sheet image w/o Ajax Bar, Tabrow and the screenshot icon itself:

$("#QvAjaxToolbar").hide();

$("#Tabrow").hide();

$("#sshot").hide();

Maybe someone finds this helpful...

- Ralf

[rbecher]

Small change in html2canvas.js line 1908 because it was not working if search box exists on sheet.

Btw. I've developed a new version where the screenshot opens in separate browser window to have more control of preview and better usabilty with context menu. Let me know if someone is interested because we can custimize it..

- Ralf

[sadickbasha]

Hi Ralf Becher,

I have installed Screenshot.qar, but unable to find the icon . Provided below my QV screenprint. I am using IE9

please guide me if any other settings to be changed.

Thanks
Sadick

[rbecher]

Hi Sadick,

it is a document extension. Did you added it via Settings/Document Properties/Extensions?

- Ralf

[sadickbasha]

Initially I tried with usual extension installation option. Now I have added as Document extension as per the steps mentioned above and it works perfect.

Thanks

Sadick

[Nicole-Smith]

I've made some updates to this extension for when it is used in an IFrame.

Details can be found here: Updated/Edited Screen Grab Document Extension

[Brian_Munz]

I've taken the newest version of this extension (with improvements by Ralf Becher and Nicole Smith) and posted it on github in order to have a central location for future updates and improvements.

Feel free to make your own changes and check them into the repo.

Thanks!

brianwmunz/screenShot-QV11 · GitHub