Articles

Easy Modal Document Viewer

Mike Harvey

Article Header

Implementing a Google Document Viewer in an IFrame in a Bootstrap Modal. Recently I was tasked with providing some enhanced ease of user for web user working with document repositories. The only option that was available was to upload and download. If they wanted to see the contents of the document, they had to download it. Obviously, this was not a very useful scenario and was a primary reason for lack of use of the repositories.


So I began my adventure in researching just what document viewers were available and how have they matured since I last implemented them. The long and short of it was they haven't really matured much in the last few years. But based on the majority of documentment types in the repos I needed to support, I landed on Google Document Viewer for now. What document viewer you choose should be largely based on the types of docs you weant to view (more at the end).

The other thing I wanted to make sure we could do was open the viewer in a modal to both retain the user's location in the app and avoid opening multiple tabs. For the modal, I just decided on the good-ole-already-built-into-the-application Boostrap 3 modal. Though the solution will work with other modals like jQuery Dialog as long as you can manipulate the modal's dom before loading.

After a few hours of monkey business and looking at other solutions for ideas this is what I came up with:

See the Pen iFrame inside Bootstrap 3 modal by Mike Harvey (@HarveyEV) on CodePen.

The key was to encode the url on click and insert in dynamically into the modal iframe which happen in an .on(click (function(e) against the document urls we want to open in our modal.

While this example uses Google Doc Viewer which has a dubious future, there are other options like ViewerJs and Office Document Viewer if you dont need to view pdf documents.

Credit to Filippo for his inspiration on the BS modal and for his bmd-Iframe jOquery plugin on which my solution is based in part.


Comments (0)




Allowed tags: <b><i><br>