Office Web Apps (Word, Excel, PowerPoint) Link To "Open File In Iframe"

Introduction

In this article, we will explore how to read the classic mode SharePoint document library files (Word, Excel, and PowerPoint) in an iFrame, i.e., without downloading them on the local drive. In a SharePoint document library, when we click on the Word, Excel or PowerPoint files, they first get downloaded on a local drive and then only are they available to read. Let us see how we can open files without downloading. The file will be opened in a model dialog box. A user can easily view the files in the browser while the PPT file opens in the slide-show automatically.

Scenario

Users may not be able to open Office documents on their client machine. Unfortunately, the default content provides a link which only allows the users to download the document and provides no link back to the document library in the same browser window. We have to find the downloaded document in a manual fashion.

The requirement is to open the documents without downloading on a local machine. It should be available in the same browser window using iFrame.

Objective

In SharePoint, Microsoft provides the below URL format to meet the user's expectation.

The URL format you are looking for is,

<SiteURL>/_layouts/15/WopiFrame.aspx?sourcedoc=<Doc URL>&file=<File Name>&action=default";

<SiteURL>

You can provide either an absolute URL or a server relative URL for the source doc, and ensure it is encoded.

sourcedoc

In the Document Library, you will notice that the sourcedoc parameter is not a URL but GUID. This GUID is NOT the unique ID of the document library. So, we are providing the unique ID of the document instead of the URL. Sourcedoc parameter is a unique GUID ID of every file/document.

file

In the document library, you can notice the file parameter is the file name.

Use the procedure given below.

Step 1

Navigate to your SharePoint 2013 site ->Document library .

Step 2

From this page, select Site Actions | Edit Page.

Edit the page, go to the "Insert" tab in the ribbon and click the "Web Part" option. In the Web Parts picker area, go to the "Media and Content" category, select the Script Editor Web Part, and press the "Add" button.

Step 3

Once the Web Part is inserted into the page, you will see an "EDIT SNIPPET" link; click it. You can insert HTML and/or JavaScript, as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
t;script type="text/javascript">
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        Templates: {
            Fields: {
                'LinkFilename': {
                    'View': function (ctx) {
                        var currentVal = '';
                        //from the context get the current item and it's value
                        if (ctx != null && ctx.CurrentItem != null)
                            currentVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

                           if(ctx.CurrentItem.File_x0020_Type == "pptx" ||ctx.CurrentItem.File_x0020_Type == "xlsx" ||ctx.CurrentItem.File_x0020_Type == "docx"){
                           el = "<div><a id="+ctx.CurrentItem.UniqueId+" class='ms-listlink ms-draggable' onclick='OpenFileInModal(this);return false;' href='" + ctx.CurrentItem.FileRef + "'>" + ctx.CurrentItem.FileLeafRef + "</a></div>";
                            }else
                {
                  el = "<div><a id="+ctx.CurrentItem.UniqueId+" class='ms-listlink ms-draggable'  href='" + ctx.CurrentItem.FileRef + "'>" + ctx.CurrentItem.FileLeafRef + "</a></div>";
                }
                        // Render the HTML5 file input in place of the OOTB
                        return el;
                    }
                }
            }
        }
    });
    function OpenFileInModal(sender) {

        var options = SP.UI.$create_DialogOptions();
        var documentID=$(sender).attr('id');
        var str=_spPageContextInfo.webAbsoluteUrl +"/_layouts/15/WopiFrame.aspx?sourcedoc=" + documentID + "&file="+sender.text+"&action=default";
        //Using a generic object.
        var options = {
            title: "",
            width: 1000,
            height: 1200,
            url: str
        };

        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

Output:(Click the document link)