Display generated PDF file on iFrame with Java server-side

Question

I'm currently developping a Java application, using Play! Framework 2. In some page, I need to generate a PDF file on my server, then send it to the browser and display it, on an iframe or an embed tag.

I'm sending the file to the client-side using Play! result mechanism :

File resultFile = new File(outputFilePath);
response().setHeader("Content-Length", Long.toString(resultFile.length()));
return ok(resultFile).as("application/pdf");

On the client-side, I receive the file, and use createObjectUrl in order to get an URL to pass to my iframe

window.URL = window.URL || window.webkitURL;
var file = new window.Blob([result], { type: 'application/pdf' });
var fileUrl = window.URL.createObjectURL(file);
$("#displayDoc").attr("data", fileUrl);

The result of all of this is quite weird : the iFrame is displayed, shows as many pages as there is in my document, but all the pages are empty. And I get this error on the Dev Tools plugin of Chrome : resource interpreted as document but transferred with mime type application/pdf chrome

Does anybody have an idea of what's going on?

Thanks!

Lauris

Answer 1

There's a few ways you can approach this.

The first way, and what might fit in better with your actual question.

Generate the PDF server side, then convert it to HTML

This is not nearly as difficult as it sounds however, and there are a number of tools out there to do it, such as ' PDF2DOM ' ( http://cssbox.sourceforge.net/pdf2dom/ ), which will take an existing PDF representation and create an HTML dom from it, this HTML can then just be injected straight into the document using normal JavaScript techniques.

The second way (Especially if your using Java) is

Use a browser based plugin that can consume and display a PDF

Since your already developing in Java you could develop a Java Applet that can consume the PDF sent to it, and display it in the IFrame as required, you could also extend this Idea to use a Flash based PDF component, or anything else that the browser can run as a Plugin.

The Problem your going to have with this approach, is the growing trend of browser manufacturers to embrace HTML5 and move away from allowing 3rd party content in the Browser. Chrome & FF still support some, as does IE11, but as we go forward , especially into the brave new world of tablet computing, many browsers will not allow Plugins to be run, which means in the long term, this might work now, but may not for long.

The Third approach is

Take advantage of Native Browser Support

Both Chrome and Firefox today have built in PDF readers, and can display PDF documents directly in a browser tab just as though it was a regular HTML page.

The key here however is "In a TAB", in most cases browsers that can display PDF's will want to try and display them as a full tab resource.

It is possible to render PDF's in an IFrame, but the support vary's greatly from browser to browser, with IE8 and below, only displaying IF you have a plugin such as Adobe Acrobat installed.

One possible route you could try is to render the content out as an inline object using something like ' PDFObject ' ( http://cssbox.sourceforge.net/pdf2dom/ ) , this will at least try to get the browser to see the PDF as an object in HTML5 which you may then be able to process using some other code in JS on the client.

My advice to you however, is for compatibility reasons, and if you want to leverage server side as much as possible, then option one is probably your best bet.

As for your chrome document type error, well that's quite an easy one to work out. :-)

You sent your content using the correct MIME Type (application/pdf) , but as far as chrome was concerned, when it received it, the document didn't look like a PDF file.

This often happens when you set the mime-type as PDF with the intention of sending a PDF, then send HTML (EG: Beacuse a server side error occurred and the web server sent an error page instead)

Hopefully something here will steer you in the right direction.