Button to download a page from the Web app

Hi everyone,

I’m trying to use the Generic Javascript View node in order to create a button that can trigger the download of a page from the WebApp on the server (Workflow attached below).
I’m using the libraries jspdf and html2pdf and the following links helped me a bit:

I’ve tried to follow the solution here: Using external JS libraries via webTemplate folder - #5 by toscanomatheus, but apparently I do not get how to use the module.exports in order to achieve my goal.
If I do not call the libraries at the top of the Generic Javascript View I can see the button, but it does not trigger anything once clicked on it.

Goal: the idea would be, at the end of some analysis and plotting on the final page (in this case I used a table, but the concept is the same), I should be able to just click a button and save the entire web page as a pdf somewhere on my local computer.

Any idea on how to tackle this problem?

I’m not an expert in Javascript until now, so any help or hints would be very appreciated!
Thanks and have a nice day!

downloadPDFWebPage.knwf (258.3 KB)

Hey Alessandro,

this is a very interesting topic and is coming up more and more in the forum.
It is nice to see that you already tried it yourself and you are on the right track. I looked into your workflow and modified it to make it work for the contained table view. The solution is not perfect, but this might give you insights on how this can work for other views as well. The main problem is, that we use iframes to isolate our views and the library you have used has problems with iframes.

Anyway I hope this helps you already.

Greetings,
Daniel

downloadPDFWebPage.knar.knwf (613.2 KB)

3 Likes

Good morning @DanielBog,

Thank you very much for your very useful reply, I’ve tried your solution and it works perfectly locally (as you said, the output is not perfect but it is already something where I can start build upon!).
So, thank you very much for the time spent to review my workflow!

The only problem that I see so far is that it does not work on the WebPortal.
Specifically, I received the following error:

ReferenceError: missing is not defined

For my understanding while searching online (for instance, here: ReferenceError: "x" is not defined - JavaScript | MDN), this should be related to a variables problem in the code, but I’m not completely sure. As soon as I’m able to find a solution I will update you and, hopefully, we will rely on more suitable package that can works with the iframes element.

Again, thanks for your time Daniel!

Best,
Alessandro

1 Like

@alessandro_mac Thank you for this interesting sharing! (and @DanielBog , thank you to you too!)

I received this prompt when I was opening the workflow

PA

At this point in time, Knime AP 4.7 isn’t released yet, so I’m guessing that the workflow is produced by the internal team on that new version.

But I had no issue diving into the workflow. I was able to export a PDF successfully with the dummy data provided in it.

I like the fact that that there is an Export button, and it asks for the destination folder only after we clicked on the button, not before we interact with the component. That’s a good thinking!

1 Like

Hey Alessandro,

I hope you could already figure it, if not this hopefully helps you:
The reason why you are getting this error is, that the html structure for the WebPortal is different to the one on the Analytics Platform and my solution is only working for the one particular structure of the Analytics Platform. So you would need to relax the query or change the query to make use of the correct path in case it runs on the WebPortal.

Greetings,
Daniel

Hey @badger101,

yes, i created this workflow with the nightly version. (This version is also publicly available so that you can try out the new features we develop, but it is not recommended for production Nightly Build | KNIME) In this case I think you can click on “Load Anyway” save the workflow and you should be fine. If not let me know and I can make the relevant changes in a 4.6.3.

Greetings,
Daniel

1 Like

That’s fine @DanielBog I was simply curious about why the error occurred. As I mentioned in the previous post, I was able to proceed with opening the workflow and using the component. :grin:

Hi @DanielBog,

thanks very much for your reply!
I needed to switch on another task during the last weeks, so I did not figured it out.
What you wrote me is really something enlightening: I should inspect the html on the webapp to figure out which html attribute is responsible for the correct path, am I in the right direction?

@alessandro_mac @DanielBog

Hi both of you, do you know how can I get the whole view of my Table View page in the generated PDF?

I’m thinking of the possibility of two things:

  1. To automatically make the font size smaller to fit everything in one view.
  2. Alternatively, to automatically adjust the maximum characters/length for the PDF file.

At the moment, my content was cut, and here’s how the end of my PDF looks like:

I have tried to manually edit the height by increasing it to 5k :

But it gives too much excess pages.

:grin: Thanks in advance!