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.

This is what it looks like

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.

Tagged with →  
Share →

5 Responses to Replace Alfresco standard Flash viewer with pdf.js

  1. Merci pour cet article.
    Sera-t-il possible d’avoir l’impression à partir de la preview ?
    Vivement le code source …

  2. Peter Löfgren says:

    Thanks,
    I suggest you test the plain viewer at http://mozilla.github.com/pdf.js/web/viewer.html and you can see its current features. You can actually upload your own pdf files to test how well they render. Since what I do is use the viewer in an iframe, they will be pretty much the same. Source code will be published shortly.

  3. Ian Crew says:

    This is VERY cool. We’ll look forward to the release of the code. One question: Does this also enable previews on iOS devices (especially the iPad)? If so, that would make it even cooler.

    Thanks!

    Ian Crew
    University of California, Berkeley

  4. Peter Löfgren says:

    I’ve tested it on my Ipad1, and it starts loading and then the browser chokes. The pdf.js script alone weighs in around 800kb compressed, so its a lot fo javascript processing to do to render a pdf.

  5. acurs says:

    I’ve just added _es.properties to the project and compiled, it works much better than Alfresco’s out of the box viewer. Thanks a lot