Most used approach to generate a PDF report (JavaScript, node.js)? - javascript

Can anyone who worked on something like this describe the general process? I'm very confused right now. By report I mean a visually appealing document with logo, tables, headers and footers, and the data will be retrieved dynamically.
The approaches I looked at are:
Use a server side library (node.js module) that generates the PDF. Send the string representation as response with Content-Type: application/pdf.
Problem: I chose PDFKit, but it doesn't work and no content shows up at all. It uses PDF 1.3, which is old.
Generate PDF on client side.
Problem: Most popular library seems to be jsPDF, but it's not very capable of producing sophisticated-looking documents.
Write template in PDF source code and fill in the data on server side.
Problem: The encoding is weird, for example if I just do doc.text("1"), a lot of unrecognizable characters appear for just the string "1". I'm very confused about this.
Finally, it'll be super helpful if anyone provides a link that can help me understand the encoding! It's super confusing to me.
Any experience with similar tasks is much appreciated!

I haven't personally done this, but the first thing I would try would be:
On the server side dynamically build the appropriate HTML document and CSS
Use phantomJS to render that document
Tell phantomJS to convert that document to PDF, saved in a temp file
Send the PDF back as the HTTP response by writing the temp PDF file to the response body
Delete the temp file
If you are struggling with content-type, content-disposition, etc, you shouldn't have to worry about that if you have a valid pdf file on disk and just write that data to the HTTP response. With the right headers, you should be able to ask the browser to either display the PDF or treat it as a file to be saved as a download.

As the member of jsreport team, I would give it a shot.
jsreport platform provides multiple ways how to generate pdf reports. The most common included one is to transform html into pdf using headless chrome. jsreport will also compile and render handlebars or jsrender html templates if its specified, it can embed images, add header/footer, run custom javascripts and more.
You can play with the examples and see the options you have
https://playground.jsreport.net
When you are done with playing, you can use jsreport online or download and install jsreport server to your company. Then you are ready to call its REST API and generate reports.
More to your question
jsreport will provide correct content-type in the response for pdf or html. You can just let the browser to display the result
data can be sent to jsreport api or retreived by custom script

I'm not sure what the most common approach is, but personally I like to create an HTML template, populate it in my server-side code, and then use wkhtmltopdf to convert the HTML into a PDF. If you're using .NET you should check out WkHtmlToXSharp (which is a .NET wrapper for wkhtmltopdf.)

Related

Converted PDF should be saved on server side, not downloaded

The issue is that a converted PDF is downloaded by the client. I need the PDF to be saved on server side and sent by mail.
I am using jsPDF and html2canvas for converting HTML to PDF.
I guess that jsPDF is not the proper tool for your task. First line at Github is "Client-side JavaScript PDF generation for everyone" which says it all.
To let the server create a PDF, you need a tool which renders the HTML result and creates a PDF from it. Maybe a MS Word or OpenDocument template used in headless mode will suit your needs, as suggested here among other solutions.

display the pdf in the same window

there is a requirement where i have to show the pdf in the same window (may be inside the embed/object/iframe).
i am getting the pdf from the service in array buffer format, when i get it i am converting it to blob and generating a temporary src for this using
URL.createObjectURL(file)
I know that createObjectURL is not going to work in IE as it is not allowed there.
now the only option i have left with is to use any third party library like pdf.js to make this thing work.i have tried the same and i had some success in it.But as it comes with the big worker.js library i am trying not to use it for just one thing.
can someone please suggest me if is there any other way of achieving this task?
i have following things or questions in my mind.
host this pdf online and just return the pdf link to the front end(i am not a bakend developer so i dont know if it is possible to host pdf dynamically somewhere in the same domain or at any third party host)
get something equivalent to 'URL.createObjectURL' for explorer and then use object/embed/iframe to show it
render the pdf in a page at server side and just return the whole document to front-end.
try a heavy library like pdf.js and make it work(last option for me)
any other solution which i am not aware of.
thanks in advance for your help.

Excel file download using MS Edge

My app creates an excel file, server side, from a database extraction.
A post request sends parameters to the server that the server then uses to query the database.
The server uses these parameters to extract data convert the data to an excel file (xlsx), then saves the file with a certain file-name as per the parameters sent to the server.
The server responds to the post request by sending the file-name to the browser.
The browser then creates a link using the filename and other predefined parameters to download the file by the following instructions:
var link = 'http://host-name/path-to-file/excel-file.xlxs'; // the link that is created by the js in the browser
window.location = link; // the file is downloaded
This works in chrome, firefox, opera and safari, in these browsers, the file downloads no problem.
However; when running in Microsoft-edge, the file is not downloaded and this appears in the page.
Someone was facing similar issue in some versions of IE and had to set Cache-Control header to make the download working properly:
response.Cache.SetCacheability(HttpCacheability.Private);
Source
The issue here is that this method of downloading files is not actually downloading the file. I was using javascript to instruct the browser to open the excel file, window.location = link;. Which tells the browser, go to a that link, and open whatever you find at that address. Which is normally an HTML file or something else transpiled into HTML. This can in some cases be also be a .pdf or the sort of file that modern web-browsers are able to interpret and run.
Now, the reason this was mostly working is; browsers like chrome and firefox are smart enough to know that they cannot interpret and display excel files, so instead, they download them. Pretty smart right. However; microsoft-edge is not so clever as its more proven compatriots. It tries to interpret and run the file, which of course it cannot. What this then leads to; is a grand display of nonsense; as you can see from screen-grab in my question above.
My problem here was actually a deeper rooted issue of technology mismatch. I had since migrated to using a more modern stack, replacing my plain node.js server with express. Moving the front-end out of a cross-origin tomcat java-container application-server model (which was causing most of my headaches on a daily bases since I was coding javascript) to a same-origin environment using webpack along with express.
And as you might know, using webpack brings a whole new dimension to the front-end that was not available before when we were using the 'old approach' to web-dev.
Most of the improvements in using webpack came from its ability to bring 'node.js' to the front end.
It has made my life as a dev 150% easier and the type of problem as described in my question above is now a thing of the past. javascript for the win! The moral for me here is that sometimes that aren't any quick fixes, and you just have to do things properly.

How to download files using IE9 with HTTP protocol

I would like to do a file (of any kind) download using IE9 without any redirection. By redirection I mean providing a URL of the resource I am trying to download to the current document forcing a download if the MIME type is not a document type.
So I am left with getting the data using the XHR object and find a way to save it on disk. Since I am using IE9, I can't use any File API provided in IE10+.
So forget about:
using Blob
using FileSaver (https://github.com/eligrey/FileSaver.js/)
using Blob and typedarray polyfills needs debugging and I can't make them work
Right now I am getting the data after the REST call and trying to write it into a document like in this post: Javascript Save CSV file in IE 8/IE 9 without using window.open()
But, the problem is document.write() seems to encode anything written to it in UCS-2, so binaries sent from the back-end are reinterpreted and the file gets corrupted. I am guessing that only text-based files could be saved then.
Last and not the least, I SHOULD not use flash.
Does anyone have an idea in mind to resolve the encoding issue or another technique to do the download?
If it can help, I am using angularjs as a front-end JS framework
For the limitation we had, passing the token as a parameter to get the file downloadable resource was the solution. When we uplift IE, we shall change the solution tough.
It implies removing any security chain filter and do a manual validation on the token in the backend.

Generating "downloadable" binary data on client in say JavaScript?

Disclaimer: I haven't done web programming for ages and am not even sure what or where to search.
Intro
Everyone's familiar with the concept of downloading files from websites, you click a link on a webpage, the server gets the request containing the URL and responds with the file data appropriately packaged with the content type indicated and all.
Problem
Now, I'd like the same experience, except the data is generated fully on the client side without any requests going back to the server. I know I can generate all the data on client and even dynamically change the viewed page using DOM. But I'm not sure about embedding this data on the page in a downloadable way, whether it's possible at all and how to do it. Is it possible? In e.g. HTML+JavaScript? If it is, will it work in the major browsers such as IE, FF and Chrome? Will it need HTML5? Or am I doomed to serving the data from the server or using other technologies (maybe Flash)?
You can base64 encode the content into an the href attribute of an anchor a tag. See:
http://webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html

Categories