PDF viewing on IOS

[GordonF]

Normally embedded PDF's don't scroll on an IOS device, has anyone tried a solution such as PDF.js to get around this, if so how successful was it?

Cheers
Gordon

[GordonF]

I have this working if anyone is interested, I build a page that uses PDF.js and it works fine for viewing on a desktop and also on IOS devices including scrolling.

[osquiabro]

I'm interested..

[GordonF]

I hope the following is useful, it's certainly simple and seems to work fine on iOS devices in addition to others.

You can download PDF.js from this link, I used the prebuilt (stable version).

https://mozilla.github.io/pdf.js/getting_started/

Extract the files and you will have 2 folders (build and web) and a license terms file. I renamed the web folder to viewer, edited viewer.html as follows:

one simple edit, change the script reference to the location of pdf.js as below

<script src="/build/pdf.js"></script>

Copy the folders and subfolders to you applications web folder, the renamed folders don't clash with any standard folder names.

Simply insert the following html into your own web page at the appropriate position, please note file=%2Fgendocs%2FE0A59F8B-38E8-4607-9C73-179C93030D63.pdf
in this code refers to a subfolder of web called gendocs and the filename is E0A59F8B-38E8-4607-9C73-179C93030D63.pdf, the %2F represent the path / characters in the viewer file parameter structure, obviously use your own folder structure and filenames.

<div>
  <iframe id="pdf-js-viewer" src="/viewer/viewer.html?file=%2Fgendocs%2FE0A59F8B-38E8-4607-9C73-179C93030D63.pdf" title="webviewer"  STYLE="width:100%; height:1000px; overflow:auto; attribute:scrolling="no"; border:none"></iframe>
</div>

I hope this is useful, I'm no html expert so please feel free to improve on it and share the improvements.

Gordon

[Bruce]

Hi Gordon,

Thanks for this.
I'm curious though, so perhaps there's a test you can do?

On a NetWebForm add a Media control, and add the PDF file name in there.
That also does an embedded PDF in an Iframe, so I'm curious to know if that solves the same problem on the iPhone for you.

Cheers
Bruce

[GordonF]

Hi Bruce,

No that doesn't work on an iOS device (I tested it on an iPhone but iPads have the same issue), you can't scroll and are stuck with all or part of page 1. I suspect it is because it is using Safari's built in PDF viewer, which to be blunt isn't very good. Using PDF.js you aren't reliant on the browser's built in PDF viewer which may or may not be up to the job.

Hope this helps.
Gordon

[Bruce]

cool, thanks for the info.