Blog

Alfresco and ECM

Replace Alfresco standard Flash viewer with pdf.js

jan 08 2012

Categories : Announcements, Products and Add-ons

Have you noticed that the flash based previews in Alfresco 4.0 looks a bit blurry? Then you are correct, it is not your vision that’s failing, they really are. This is due to change settings for pdf2swf program (that create the flash) to make it more reliable for large pdfs, and for certain pdfs it could crash the jvm completely. So there was a good reason for the change.The image above shows the difference between the settings. Details can be found in this issue ALF-10870. This issue is now closed as won’t fix, something I do not agree with. It would have been better to postpone the fix for 4.0.x (or any later version) if there is no immediate resolution, because a fix is needed, no one wants previews that makes Alfresco look like an inferior product (that it absolutely not is) on first impression.

But my intention here is not to whine, Alfresco has the bigger picture here, and has to set the priorities. And since this is an open source product, if you are not to happy with how something work, you can fix/enhance it. So that is what I’ve done. I’ve created an alternative viewer based on the Mozilla project pdf.js.

All documents that are shown in the flash based viewer has been transformed in the chain:

<source format> - <pdf> - <flash>

If we could skip that one last step, we can avoid using pdf2swf, and thus the problem of risk of jvm crash. And there would support for the same source formats as currently. But then there needs to be a way to display the pdf inline. Chrome and Safari comes with build in pdf viewer, so that could be used. And many other have an external plugin like Acrobat reader installed. That would cover many users, but ideally there would be something that can be run in the browser to show pdf. And this is what pdf.js does, all implemented in Javascript and using html5.

So the viewer I’ve implemented tries to

  • Use pdf.js viewer for html5 compliant browser
  • If pdf.js cannot be used, try to see if pdf reader plugin is available, and display the pdf using that plugin
  • As last option, the standard Alfresco flash based viewer is used if none of the above works.

The easiest way to do this was to use <iframe>, where the pdf.js viewer is loaded via an Alfresco surf page that implements the standard viewer almost out of the box. You can try the standard one here. It is very feature complete, and handles most of the pdfs I’ve tried very well.
The same method, using iframe, is used to display using a pdf reader plugin, just call the pdf directly in the iframe src url.

I will release the source code shortly, needs to be cleaned up a bit. I will update here when I’m done with that.

Update
The source code is checked into the Share Extras project. You can view it here.
There is no compiled release yet, that is on purpose, it is still untested, but if you know how to check-out and compile, then I assume you understand not to rush it to use on a production server.