I hate the typical user experience around viewing and distributing PDF files (or other document formats). Usually we're forced to download the file to our local computer, then view it using a separate viewer. It litters the Downloads directory with old files we've downloaded, and it's somewhat jarring to find yourself suddenly having to navigate to a separate viewer application. Further, an external viewer probably doesn't work well on a mobile device where the operating paradigm is quite different from desktop computers.
What I've done in the past is use the Google Docs Viewer to provide an embedded Viewer to my visitors. While that's a powerful viewer application that can handle dozens of file formats, it has two limitations: First, the visitor has to be logged into their Google Account (if they have one). Second, there is some kind of bandwidth cap and the visitor might see an error message rather than the document.
I've decided to abandon Google Docs Viewer because of those reasons. I'd learned that PDF.js, a new component in Mozilla that handles PDF viewing, can be used standalone, but it's pretty complex. Fortunately a team of people have created the Viewer.js project, which uses PDF.js and a couple other libraries to provide a document viewer any website author can use, and supports a couple additional document formats to boot. It's not quite as good as Google Docs Viewer, but it'll improve as the Mozilla team improves PDF.js.
Using the library is pretty simple - the website has good instructions for you to follow. I've set up a demo page so you can see how to use it.
I've also implemented Viewer.js support in AkashaCMS that makes it very easy. See https://github.com/akashacms/akashacms-document-viewers
config.js file include this plugin:
The Document Viewers plugin supports embedded content like Youtube videos. It supports setting up a Google Docs Viewer, and it can now use Viewer.js for the same purpose.
Viewer.js has two modes:
- a stand-alone page viewing the document in the full browser viewport
- embedded in the page. See the Document Viewers plugin documentation for more information.