Recently on a project we needed a way to display PDFs inline on a page within a “document viewer” we were building. Basically there is a table of contents driven by a library going down the left hand side and when the user chooses a document we wanted to render it in a panel on the page.
Using the inspector in Firefox we took a look at how Microsoft does it on the “popout” document view in a library. Turns it is very simple. There is an iFrame point to the WebApps page and the GUID of the file is passed in. Luckily as we were working in JSLink we had the GUID easily available to us and it worked like a charm.
<iframe id=”medecision-viewer” src=”<SP Online Site URL>/layouts/15/WopiFrame.aspx?sourcedoc={GUID}&action=interactivepreview&wdSmallView=1″ role=”presentation” tabindex=”-1″ frameborder=”0″></iframe>
Our next mission is to play with the action and wdSmallView parameters to see what we can enhance. Right now if we remove them it stops working.