How to open Office Web Apps (Word, Excel, PowerPoint) documents in Iframe

This SharePoint tutorial, we will disucss how to open Office Web Apps (Word, Excel, PowerPoint) in Iframe in SharePoint Online or SharePoint 2013/2016/2019.

We will see how to read the classic 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 in SharePoint. A user can easily view the files in the browser while the PPT file opens in the slide-show automatically.

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.

Open Office Web Apps (Word, Excel, PowerPoint) documents in Iframe

In SharePoint, Microsoft provides the below URL format to open the file or document in an Iframe in SharePoint. The URL format looks like below:

<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. The Sourcedoc parameter is a unique GUID ID of every file/document in the SharePoint document library.
  • file: In the SharePoint document library, you can notice the file parameter is the file name.

Now, we will see how we can implement this in SharePoint to open any Office Web Apps (Word, Excel, PowerPoint) file or document in an Iframe.

Navigate to your SharePoint 2013/Online site -> Document library .

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.

Once the Web Part is inserted into the SharePoint web part 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>    
	<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>  

Now Save the web part page and then we can see how to preview is appearing in Iframe in SharePoint.

Below you can see a SharePoint document library that has different types of documents like word, excel, PowerPoint, etc.

Open File In Iframe sharepoint online

You can see the word documents will appear in an iframe like below:

Open File In Iframe sharepoint 2013

You can see the excel document will appear in an iframe like below:

open Office Web Apps (Word, Excel, PowerPoint) documents in Iframe

Also, you can see the PowerPoint document will appear in an iFrame like below:

open Office Web Apps document in iframe sharepoint

You may like following SharePoint tutorials:

Here, we learned how to open Office Web Apps (Word, Excel, PowerPoint) in Iframe in SharePoint Online or SharePoint 2013/2016/2019.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

>