by Mike Harvey
Tue Jul 18, 2017
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:
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.