I've been converting HTML + CSS to PDF in server-side Java, e.g., Flying Saucer (http://code.google.com/p/flying-saucer/)
Now I need to look at alternative approaches with the growth in client-side visualization APIs like RaphaelJS, that should also be included in PDF exports.
Ideally, I would just have a print-friendly layout and CSS (kind of like Google maps does) and there would be some magic way that a Javascript call could silently "print" the window to a PDF file, rather than having a separate PDF generation pipeline.
Is there any such thing?
If not, what other approaches would you recommend?
For example
run Raphael server-side with node.js or Rhino, use Batik to convert SVG output to image, render PDF server-side
same thing but do some hack to grab SVG from the work that Raphael already did client-side
Do a headless-browser on the server, like wkhtmltopdf or phantomjs, to capture and execute the generated HTML/JS server side.
Any success with any of those approaches or other suggestions?
Those two options worked for me:
Client-side PNG generation with html2canvas (only works where canvas is supported)
Server-side PDF or PNG generation, with wkhtmltopdf (you might need xvfb)
Please ask if you need more details about how to use those solutions.
I set up a (very) simple test of both PhantomJS and CasperJS in order to be able to print a PDF server-side with a headless browser. It sure needs additionnal non-Java tools but I think this approach is more future-proof.
In those exemples, I am able to dynamically load a web page, let angular initialize and then interact with it with Javascript code in order to print the page as a user would have modify it in a real browser.
Here are my examples: https://github.com/fmarot/miscPOC/tree/master/angularAppOutputPDF
Related
For example, we have a cool styled website, can we use developer options(f12) from browser to snatch this?
Ignoring any legal / copyright implications, you can grab the client-side code this way, yes. All HTML, CSS, JavaScript and imagery can be seen through the F12 Developer Tools.
However, there is no way to know what server-side code a website is using (outside of the server owner themselves configuring something incorrectly and thereby exposing that information).
The answer from Obsidian Age is a good one. I'm going to add some more information that may be useful to you.
I've used this technique myself of getting source code via the developer window. Usually I want to find out how they did some neat CSS or JS trick so that I can try it in my own apps.
The files that make up a website such as HTML, JavaScript, and CSS you can find in the Network tab and can easily copy these.
However you should know the JS, CSS, and even (sometimes to a degree) the HTML files have been minimized and are typically missing any comments from the original developers. Chrome has a nice feature that will un-compress JS files and you can even set break points and step through the JS code.
Is there a way to save an html file that still contains the user interactions of jQuery and JavaScript?
Because JavaScript and CSS are client-side (meaning they run in the browser), yes, you can save the page and use it off-line.
If the JavaScript and CSS are embedded within the HTML then you can have it work as an all-in-one page.
If you right-click on a page and "view source" you can easily download the code.
Note that any server-side interaction (such as PHP, Java, etc) will not work this way.
What is an easy way to write a browser application on Linux (Crunchbang/Debian)?
I need to write an application for some DOM editing and automation. My preferred way of doing this is to have my own browser object (like WebKit's WebView or System.Windows.Forms.WebBrowser) and access the DOM from there. I tried both (with mono), but I found two things:
WebView does not implement DOM access (ref)
System.Windows.Forms.WebBrowser does not work (ref)
This means Mono is not very suitable for this purpose.
What is your preferred way for accessing web pages, reading the DOM and automating navigation?
Probably easier to use PhantomJS?
Uses Webkit to render webpages and then makes the DOM available for you:
http://phantomjs.org
Is there an application that lets you pack it with a bunch of html files and it will render them? Basically, I want an app that all it does is that it has an embedded browser, and I can pack it with my files. Is there such thing?
It would be nice if it was cross-platform or offered additional APIs.
My end goal is I wanna build an app that produces html and then compiles it and gives it to the user.
One solution is to use Opera Widgets, my app can build the html files, and then pack it as a desktop widget. But that requires user to have Opera installed. It would be nice if there was an embedded browser solution.
Try Adobe Air. It is basically a JS-heavy application packed in a platfrom-independent package. Also includes a WebKit-compatible browser.
May be less or more than what you need.
We have to create the demo for our web application.Our application is a J2EE app.We have to demo some of the functionality as clickable HTMls.Is there a way we can do that using some tool instead of doing it manually, we donot want to use products for flash demo's etc.
Use a web spider or similar to dump the raw HTML output. Personally I would try the ScrapBook Firefox plugin, but I'm sure there are many others.