CODEWITHSUNDEEP
javascriptangularjsnode.jspdfphantomjs
DreamState
DreamState

Reputation: 31

Export a PDF report with charts from Node/Express/Angular/PhantomJS

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.

Upvotes: 3

Views: 3717

Answers (1)

younes sofiane
younes sofiane

Reputation: 451

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.

Upvotes: 0

Related Questions