The product I'm working on has some nice graphs on a HTML5 dashboard. The graphs are rendered in Javascript using Flot.
Users would like this Dashboard emailed to them daily as a PDF report, on a fixed schedule. So for example they want an email every day at 8am to be emailed to them.
I've thought of using Python's Requests (i.e. do a request.get) to get the HTML5 source of the page and then convert the resulting HTML5 page to PDF using Weasyprint but this is obviously not going to work.
The Javascript charts are the biggest headache as they won't render unless viewed in a browser that has decent Javascript support, so the outlined approach won't render the Javascript graphs.
What's the recommended way of converting a dynamically generated HTML5 page into PDF? How do other people do this?
PhantomJS is the solution. It's a headless WebKit implementation that allows us to render to PDF the dashboards with Javascript graphs and all.
I've now set up a batch job that will run every day to convert our dashboards to a PDF document that gets emailed to the users.
Addendum
Some other things to be aware off. In the current 2.1 build of PhantomJS, there is a bug that causes renders to PDF to clip. The fix is scheduled for 2.2. A temporary workaround as detailed on the bug report is to set the CSS zoom level of the document. The following CSS fragment works for me.
html {
zoom: 50%;
}
Related
This is the problem we have. We have a spa and there are some pages that generates some reports. Those pages allows users to download some graphics generated by the spa. The download can be done with a word (docxtemplater), pdf (pdfmake) or just images files (jszip and download.js). All this is done by the spa (in the browser). There are two problems: as users start to add more data then the download is taking more time to render. And we have seen there are some incompatibilities due to some browser/OS versions. The main issue comes from generating images from the dom. We are using html2canvas (slow) and dom-to-images (fast but only working in chrome for us now - we had some issue when trying to generate images from some google charts).
What we are looking for now is to move all this into the server so we can have a controlled environment so it has support for IE, Safari, Firefox and Chrome. The idea is to generate all these files in the server.
I've read we could accomplish this by using phantomjs, phantomcloud or nightmare. Our backend is REST using java. So, before I dag into this, I'd like to know if anyone has experienced a similar issue or can point me in the right direction.
I am using AngularJS in a MEAN stack based on DaftMonk’s generator (https://github.com/DaftMonk/generator-angular-fullstack). I am fairly new to pretty much everything Angular/JS/Node (and stackoverflow so please feel free to point out if I need to reword my question!).
I am aiming to produce a multipage PDF report for a user from an Angular page that contains six graphs, images and text.
There are a number of questions on stackoverflow and Google that relate to potential solutions to this, but having checked these exhaustively, they do not help with what I need to achieve (or I do not understand how I can use them in my scenario..).
Currently, when the user navigates to the ‘report page’, an http request is sent to Node/Express from the Angular controller, which checks the user role/group ID, queries the database, anaylses the data and sends it back to the browser for rendering into graphs (currently using angular-chartjs and flot).
The user selects graph type and can choose a maximum of six graphs to display from a possible list of 20+. These six graphs are what need to be exported to a PDF report (with other information). I need to make this (within reason) as browser compatible as possible (at least IE8+) although my current solution is IE10+ with PDF export disabled for older browsers using Modernizr.
From stackoverflow and Google, possible solutions include using PhantomJS in Node to capture the screen or using a client-side PDF renderer (e.g. jsPDF). Out of these, my feeling is that PhantomJS would provide the most flexibility/browser compatibility. Also, I need to produce several different reports depending on the user role, so having all the code to produce the reports within the browser is not desirable. But I am totally stuck as to how to access ‘what the client sees’ using the MEAN stack. PhantomJS would need to effectively be logged in as the client, and have access to the six choices for graphs that the client has made.
From my research, using PhantomJS would require creating an html page, somehow transferring what the client sees/data/graph choices to it, and then capturing that to render to a PDF, before sending back to the browser. One way might be to pass the required information back to Express (with a POST?) and then rendering a server-side html page which PhantomJS could be pointed to, but I have no idea how to achieve this (or if it's possible). Another possibility would be to store the client report data, choices, etc in the database and set off a task to render the PDF and send it back to the browser when done, but again, I have no idea how to achieve this.
I have read about cookies in PhantomJS or navigating through the login page using code, but this seems to be a cumbersome way to achieve this. Can an html file be created server-side, with chart.js (or another charting library) injected (and angular?) and all the required user data/chart choices for PhantomJS to render to a PDF? I guess in some ways I need to be able to use a PDF generator, charting library, etc server-side to create a PDF.
Any advice (with possible code examples) on how to achieve this would be appreciated.
I guess I had the same problem as you (only I was using Laravel in server side).
The idea I came up with was to convert the canvas generated by angular-chartjs to images (using toDataURL() on the canvas elements)
$('.theCanvas').each(function () {
var canvas=this;
img=JSON.stringify(canvas.toDataURL());
});
http://plnkr.co/edit/PkZiqYynzQXehbe6p1eH?p=preview
and then sending the images to the server to create the pdf , and finally sending the user the link to the created PDF.
In my case, they are plenty of packages to generate a PDF from an html in server side, and I don't know if a tool exists for Node.
I hope this helps.
I am developing a WebView based Android application. This application is very responsive and fast on major Android versions i.e. 2.3 onwards but it's very slow on Amazon Kindle fire. One of the reasons for this sluggish behavior is it's reading lots of xml files (40-50) to load contents in a single html page and there are also hundreds of images per page.
One solution that I can think of is to read and parse xml files using native Android APIs (in a thread) and then incorporate the parsed xml into the html page. Could anybody please tell me how to use Java object in JavaScript? Any help would be highly appreciated.
For your parse slowness issue
Have a JS-> Java Interface to parse in Java and have those XML data fetch operations in Java too.
Displaying too many images slowness
Display only selective set of images as you scroll. Displaying all the images together puts a heavy load on the browser rendering. So use a Lazy Load (jQuery plugin) - http://www.appelsiini.net/projects/lazyload to only load when the user scrolls.
HTML5 Rich app.
I need to deliver to a user printable (A4 format) report from the application. So that the user could see it preview version in the app, and then print it.
What alternatives do I have to do that?
We are currently doing this at Agency Fusion, and have been looking at some libraries/services like:
WickedPDF (ruby)
DocRaptor (SaaS with multi-lingual api wrappers)
Prawn (ruby)
We have decided to go with Wicked PDF and using css page-break properties
This way we have control over how the pdf is rendered. The user can then download the PDF as the report, and then send it to the printer if they wish to print it.
There are two completly different approaches:
Try to create "printable" HTML, deal with all cross-browser issues (I mean the printing-related ones, that go on top of the "usual" ones), lose control over page headers etc.
Use something, that is "electronic paper" - PDF being the most prominent suspect. There are many libraries to facilitate this approach.
You might be able to infer which version I prefer from my tone.
I'm looking to use this chart generation library: http://www.jqchart.com/
Ideally, I would prefer to use a PHP charting library for the current project I'm working, but, by the looks of it, this is the only library I've found that can handle what I need to do (given a somewhat unconventional requirement for the charts).
The issue is that I need to get the generated graphs as images (at the moment each graph seems to be a combination of images) to the server so that I can generate some PDF documents, etc.
I'm thinking of attempting to create an image using JS, pushing this back to the server and then generating the PDF although this pretty nasty and will probably cause issues between different versions of the browser.
So now what I'm looking for is a solution that will allow me to generate the graphs and turn them into images on the backend.
Any ideas?
EDIT: For the requirement that led me to rule out a number of other charting libraries, see here: Complex charts in Google Charts
That really isn't all that relevant to the question of processing Javascript on the server, though.
You can render a javascript graph on the server using phantomjs. Here is an example.
Not sure what your requirements are, but I'd check out Google Chart Tools: http://code.google.com/apis/chart/. It's really simple to use. All the data is in the image URL get request, so you can generate charts using client-side JavaScript too.