Generating a PDF from a Tomcat-served webpage - javascript

I'm having issues trying to figure out how to generate on server side a PDF from a javascript-heavy webpage that is served from Tomcat (the application is Pentaho CE). The content is a dashboard that responds to user interaction. Pentaho (the application) replaces divs dynamically with various content through AJAX calls. I'd like to export to pdf whatever state the user has the dashboard at. There are no restrictions on what I can put on the server, but I need to avoid having the client install anything.
I've taken a look at this, along with a bunch of other google-fu:
JSP/HTML Page to PDF conversion
wkhtmltopdf seems to be a popular choice; before I start banging my head against it, I have a few questions:
Can wkhtmltopdf handle going to password protected jsps where authentication is handled by the application? Would the dynamically loaded divs break it?
Is there a way to perhaps return the client view to the server for processing? I read about screen capturing...
Another option that could work out would be to automate a local access to the dashboard on the server through a server-hosted web browser and generate a PDF that way...is this possible, given the constraints of Tomcat and password protection that's handled by the application? The javascript components that Pentaho generates cannot be accessed outside of the application.
Thanks!
EDIT:
Good news! wkhtmltopdf works! Kind of. I got past the password authentication through putting the login details through a query string, and I'm getting a pdf of the correct page now. The issue is that no javascript components are showing up... (they work for pages like yahoo.com, so maybe I'm missing something here).

If you have a lot of AJAX calls you should wait for them. Use the --javascript-delay x argument, where is x is the time to wait.

Related

Meteor application load testing with k6, wait on body element

New to k6, working with a web application that presents a spinner briefly on the home page while css and js files load.
Once the files are loaded and scripts are available, a login form is added (replacing the spinner).
With k6, is there a way to wait until a specific body element (the login form) is available in the body before continuing with the next step (ie. populating the username and pwd and submitting the form to login)?
Currently, when I review the response body, I see the spinner element only. Adding a delay does not appear to affect the body returned, even though the login form should, in theory, have been added to the page.
If the element is added to the body after the initial page load, will it be detected by k6 and made available in the response?
Thanks for your help.
Bill
k6 doesn't work like a browser - the load tests are written in JavaScript, but when you request an HTML file, the JavaScript in that file isn't executed. It usually can't be executed even with eval() or something like that, since k6 doesn't have a DOM or any of the usual browser APIs. So you have to explicitly specify any HTTP requests you want your k6 scripts to make, and in your case I assume that the spinner and login form are generated by a JavaScript somewhere in the home page.
To simplify working with such highly dynamic websites when you use k6, you can use the site normally in your browser, record the browser session as a .har file and export it, and then convert that .har file to a k6 script with the k6 convert command like this: k6 convert session.har -O k6_script.js. You can find more information about the whole process here.
k6 doesn't execute client side code, nor does it render anything. It makes requests against the target system and loads them. This makes it efficient to make a large number of reqeusts, but creates new things that must be solved in certain cases.
Capturing all the requests necessary - typically using the k6 convert to convert a HAR file works well to give a foundation of a script. I suggest using the other options in converting to limit any third party requests. e.g. --only or --skip. More info here: https://support.loadimpact.com/4.0/how-to-tutorials/how-to-convert-har-to-k6-test/
Since you recorded your browser session, if your application/site uses anything to prevent CSRF attacks, you must handle those values/correlate them. e.g. .NET sites use VIEWSTATE, if you were testing a .NET app, you would need to instruct the VUs to extract the viewstate from the response body and reuse it in your requests that require it
In a similar vein to point 2, if you are submitting a form, you probably don't want to utilize the same details over and over again. That typically just tests how well your system can cache or results in failing requests (if you are logging in and your system doesn't support concurrent logins for the same user as one example). k6 is able to utilize CSV or JSON data as a source for data parameterization. You can also generate some of this inline if it's not too complex. Some examples are here: https://docs.k6.io/docs/open-filepath-mode

Best way for local HTML file to communicate with (read/write) local .xlsm Excel file

I'm a teacher. My grade book is a .xlsm file, located in my Google Drive folder. I'm building a web app, also in my Drive folder, that shows the students names arranged according to the seating chart. I want to run the app on my Android phone, and click a student's name to add a participation mark to the grade book. The app should also display the students' existing participation scores (from the grade book). What is the best way to go about accomplishing something like this?
*I initially tried to do this using another .xlsm file but, when I realized that macros don't run on the Android version of Excel, I switched to an HTML-based app. Was that the right decision?
Here is a sample .xlsm file. In this case, the app would check cell A2 to make sure it's the correct student and then both read and write to cell B2.
If Excel isn’t doing it for you on Android then I’d strongly suggest looking in to Google Sheets. Creating an app for this yourself would be a fun project, if you enjoy that sort of thing, but Google Sheets sounds like it might do the job and you can be up and running in a few minutes.
Having got that out of the way I think it would be best to clear up how web apps work, it sounds like you have some confusion about how they work (or I am from your question!).
A web app is typically made up of two parts, a client and a server.
The client requests resources from the server and the server responds. For example, the client requests the resource associated with example.com, the server is listening for this request and fulfils it by returning a string of text with some meta saying its html. The client (lets say its a browser) understands this is html and begins to parse and render it. If it hits <link> or <script> (or some other stuff) it knows to go and request more resources from a server.
The client is totally detached from the server, it has limited access to the file system and must perform tasks by asking the server to do them. It can only ask, not enforce.
Often there is a 3rd piece which is storage of some sort, this could be a file system somewhere or a database. The client is also detached from this and the server (or another service) owns and manages the storage. In your case Google Drive can act as your storage.
A web client has no direct access to your Google Drive, although if its contents is public there is likely a scheme for you to get a resource (I don't know how Google Drive works but this is fairly likely). I'm not sure it will let you write to the Drive though, not without additional permissions (granted through authentication) being acquired. Many popular frameworks and libraries will allow you to interface with Google Drive and handle the auth handshake etc etc, they are often called a driver or connector.
Very basically, you'd likely need a couple of parts:
Storage -> Connector -> Service -> Client
You can get away with putting connector and service together, and you might be able to get away with connecting direct from the client, which would save you the trouble of creating, hosting and running a service.
The last piece of the puzzle is the conversion you must do from the .xls data into something JS on the client can work with (again, there are often multiple ways of doing things, you might decide to render your page on the server).
There are many tools out there that can convert from .xls to json, which JS can then parse and use (on client or server). I have used one a couple of times but I can't remember which one right now, a quick npm search throws up a number of hits.
Your best option is not to use Google Drive at all. If you are interested in doing something like you described, I would strongly recommend using either PHP and MySQL (a popular combination) or Google Cloud Platform's App Engine (they provide a lot of help, even allowing you to easily build an app that you can sign in to from your Android device with your Google account). If you're more in the mood for Do-It-Yourself, I would probably recommend Spring Boot (These tutorials look pretty good)
When it comes to integrating with Google Drive, it is technically possible to do, but so difficult that you would be much better off writing your own system from scratch and perhaps exporting to an Excel file. (See this page for a tutorial on exporting to Excel from Java)
You have several concerns with the final solution for your problem:
Security (You don't want students breaking into it, like I probably would have done)
Accessibility (You want to get at the information on your phone and your computer)
If I was in your position, I would probably write a Spring Boot application (which can house it's own database, website and API for a computer/phone to communicate with) and an Android application that talks to it.
Also, it would be helpful to know what programming languages and/or libraries/frameworks you have used in the past in order to make better recommendations for your situation. What have you used in the past?
If you need help or have questions, just message or comment.

support to login with javascript or

I am developing a web application using Facelets and Entity-Controller-EJB structure. In the application, there are contents which are reachable only if you are logged. A bean checks the login state every time you click on a button/link for the restricted contents, and redirects you either to the selected page or to the login page.
I thought that this way is not safe, as you can write the link directly in the browser instead of generating it from a button that checks the bean. So what should I do? Is there a render option embeddable in each page or should I write a javascript function? In this case, what should I do? I have studied js fundamentals but don't really know how to implement this control!
Thank you for reading!
You cannot rely only on frontend to deny access to some parts of a web application.
This because all the HTML/CSS/Javascript is downloaded on users' browser, so they can read your code and your authentication mechanism, and understand how to bypass it (or just disable it).
More on this: Why are browsers allowed to display client-side source code?
What you need is implementing some security mechanism in the backed.
The simplest one is to delegate this to your webserver (here the instructions for Apache) and then use something similar to this to do login.
Another way is to have a proper backend: you send data to it (email/password) and it provides you a token that you use to access protected resources.
Or also, dinamically create your documents on server side, only if the user is authenticated.

Dynamically update static webpage with python script

So I'm using a Raspberry Pi 2 with a rfid scanner and wrote a script in python that logs people in and out of our attendance system, connects to our postgresql database and returns some data like how much overtime they have and whether their action was a login or logout.
This data is meant to be displayed on a very basic webpage (that is not even on a server or anything) that just serves as a graphical interface to display said data.
My problem is that I cannot figure out how to dynamically display that data that my python script returns on the webpage without having to refresh it. I'd like it to simply fade in the information, keep it there for a few seconds and then have it fade out again (at which point the system becomes available again to have someone else login or logout).
Currently I'm using BeautifulSoup4 to edit the Html File and Chrome with the extension "LivePage" to then automatically update the page which is obviously a horrible solution.
I'm hoping someone here can point me in the right direction as to how I can accoumplish this in a comprehensible and reasonably elegant way.
TL;DR: I want to display the results of my python script on my web page without having to refresh it.
you can make a html file and send XHR request to the primary one every x seconds .
setTimeout(function(){
$.get( "yourPrimaryFile.xyz", function( data ) {
$( "body" )
.append(data) // Mr.X
}) }, 3000);
I assume an more or less obvious solution like building a REST API with e.g. Flask and using some javascript framework (e.g. Angular or React) on the frontend is out of scope / too much?
Besides that I can only think of using 'plain' jquery or similar frameworks, which is more or less what you do currently.
I would recommend trying the flask/angular combination. A simple app (few API endpoints for login and out and a few checks) and a basic website with dynamic content is setup pretty quickly.
To update page data without delay you need to use websockets.
There is no need in using heavy frameworks.
Once page is loaded first time you open websocket with js and listen to it.
Every time you read a tag you post all necessary data to this open socket and it instantly appear on client side.

Using a server to send/receive information between a mobile phone and web page

I am trying to set up a simple set up as follows:
Have a mobile app with a page consisting of 4 lines (4 html paragraph lines (I am using phonegap)).
I want to use a web page from which I will input the data for those 4 lines. This information is sent to a server and that server transfers this information to that app on that mobile phone. Now, those 4 lines on the mobile phone is filled with the new information.
Similarly user inputs information on another page consisting of 10 lines of li (list). This information is again sent to the server and to the web page where the information is displayed.
I can almost feel the "internet police guys" getting all hyped and ready to vote this question down. But please understand that I have been on this site and various forums desperate to find a tutorial to guide me to do this and not able to find.
I am trying to use ajax to perform this setup. Confused how I would be using the php file. Information such as password n username is going to go in that php file to connect to the server. But php is a server side script thus needs to sit at the public_html folder. How do I use the php file from my desktop? Write a separate javascript to access it?
It is the concept that is confusing me. I am familiar with html,js,php.
I would appreciate any guidance or maybe a link to a tutorial which would help me to do the concept I mentioned. Thanks for listening.
You will need to create an API using PHP. This API is uploaded to your server and is considered "RESTful". Google a tutorial for what fits your needs. You can set all sorts of rules in this API such as requiring any requests to have an ID or access token.
Since you are using PhoneGap, your HTML and JS files rest on the device, so you will need to allow permissions to your API from anywhere. For this you will have to speak to your host provider about unless you know how to configure it yourself (some providers restrict what you want to do by default as an extra security precaution against XSS attacks).
Next, you can either use jQuery, or you can write some AJAX calls by writing the JavaScript yourself.
The most efficient way for this to work is to send JSON objects to and from the API. You will include a "command" in the JSON when you are sending from your app. On the PHP side, you will retrieve this command and use the rest of the data included in your JSON object to process the request. Your API will need to encode a JSON object for return (such as a user's profile information).
Here is a basic PHP API tutorial to get you going that explains some of the features of a RESTful API: PHP API
Here is a simple AJAX function (you will probably want to make this much more modular): AJAX
As broad as your question is, it seems like the best/easiest thing for you to do will be for you to first create a PHP webpage that will access a SQL database to perform the record updating. Actually, this should serve all of your needs for your mobile users assuming you don't need push notifications for live data updates.
I am assuming, since you are using phone gap, that you are more comfortable with web languages. After you get the webpage fully operational, then you should start building your app based on that exact same SQL database. With mobile app development there are a lot more "what if's" (what if the phone rings, what if the app is running in the background, what if there is no cellular service, etc...)
It is always easier to start with what you know and build on that, rather than starting with a new development platform and troubleshooting as problems arise.

Categories

Resources