Published by urs on 9. Oct 2013 09:36:48
Updated by urs on 9. Oct 2013 10:36:14

At first glance, this seems to be a pretty easy topic since PDFs are everywhere
and can be found in almost every bigger website. But in most cases, PDF files
are just linked for download and not embedded directly in the site. If the user
clicks such a link, the browser decides what to do with the file: Just download
to the file system or display a preview in a new tab or window. This also works
pretty well for mobile devices since there are PDF readers for almost every

But what if we want more than this, like embedding the document in the website
and jumping to a specific page? The first part of this is very easy: We can use
an iframe and set the location to the URL of the PDF.

This works fine on a desktop browser like chrome as it fits the width of the PDF
to the width of the iframe:


But when we open the same page in mobile safari, it looks like following:


The PDF is not scaled and much worse: You can not even drag the document around.
In short: This form of embedding PDF in websites is completely useless on iOS.
Investigating deeper on this, it turns out that there is no way to fix this
issue with a pure HTML / CSS solution.

Another solution that is worth looking at is "pdf.js"
 originally intended as a Firefox plugin to
display PDF files in a platform-independent way. It renders PDF files into
canvas elements using nothing more than pure JavaScript. In the hope that this
will fix our PDF problem, we tried to include this JavaScript library in our web
application. This worked fine for small- to medium-sized PDF files in desktop
browsers as well as on mobile safari. But when we tried to display PDFs with
complex content or more than 100 pages, we quickly ran into some limitations of
this library: The rendering of huge PDFs was painfully slow and failed
completely in some cases. I personally like this approach as it provides a
platform independent solution which can be easily included in web applications,
but it seems that it's just not ready right now. But maybe in a couple of months
or years, this will be the way to go for displaying PDFs in web applications.

Another approach to fix this is to convert each page of the PDF into a PNG
image. This approach is used widely on the web; for example by "google books"
 for the preview function. This approach is technically
easy and things like zooming or jumping directly to a specific page can be
implemented with a couple of lines of JavaScript. But one of the big drawbacks
is that text is not submitted as text but as an image. This increases the
transferred data size significantly which is, on the other hand, bad for mobile
devices with their typically low bandwidth. To address this there are techniques
like using the offline-application cache, which should definitely be kept in
mind when using this approach.

After many hours investigating this topic, we ended up using the approach to
include single pages of the PDF as PNG images in our web application. This
requires that the PDF files be prepared server-side. Also, we implemented a
dynamic-load algorithm which loads the images only when they are visible on the
screen. This allowed us to display big documents without overburdening the video
memory or the bandwidth of the mobile device.