Include Office content in your web pages

Articolo
07/28/2014

As some of you know, one of my team’s core focus is to enable developers to build amazing solutions on top of Office 365. And over the last few months, we’ve released a lot of new extensibility features, documentation, samples and open source projects to support the ecosystem.

In this blog post, I wanted to share an extensibility tip which is super easy that any user can do without writing code – embed Office files in any web page, including blog posts, using the power of Office Online. This is a very simple, yet powerful way, of displaying dynamic spreadsheets, presentations and word documents. You can do this for documents stored in OneDrive and OneDrive for Business.

So how do you do it? In OneDrive, it’s very straightforward and visible in the standard navigation. You just go to https://www.onedrive.com, sign-in, select the file you want to embed and then click on “Embed” at the top to copy the HTML code. You also have the option to embed a folder under Folder Actions –> Embed Folder. So if you have a public folder, you can share it easily with everyone. If you want to embed a file, the key is to select the file so you get the Embed option in the top nav. This, as you would expect, respects the OneDrive security permissions that have been configured.

The actual code is below. The parameters are straightforward and you can easily change them.

So in this example, here’s my Copenhagen Ignite keynote presentation embedded in this blog post that I’ve shared with everyone:

You can do this for other Office file types as well. Here’s a demo Excel file hosted on my personal OneDrive in the same folder:

The TechNet team took advantage of the power of embedding Office files in web pages in their Office 365 service comparison page @ https://technet.microsoft.com/en-us/office/dn788955.

So what about embedding documents stored in OneDrive for Business? You can do the same thing – you just have to do a little more work to find the HTML code to embed the doc. Like before, security permissions are respected. For PowerPoint and Word files, you can find the HTML code in the document preview under the “Embed Information” option in the document library (see below).

Below is the code. This has more extraneous HTML code, but is similarly constructed with parameters for a document id, width and height. One thing that’s missing is an authkey. This code requires someone to be authenticated.

For Excel files, there’s no UX to grab the HTML code. You need to take the HTML code from any PowerPoint/Word file and replace the sourcedoc GUID with the Excel file GUID. You can easily get the Excel GUID by viewing the Excel file with Excel Online – it will be in the URL string.

Here’s a screenshot of how I embedded a PowerPoint and Excel file hosted in my OneDrive for Business on a SharePoint page using Page Viewer web parts. As you would expect, when I embed the Excel file, I also get the App for Excel that was inserted into the file – very cool.

This is pretty straightforward when you’re looking to embed files in an authenticated intranet/extranet scenario, but how do you embed Office files hosted in OneDrive for Business in anonymous scenarios? Assuming your IT admin has allowed for external anonymous sharing (more info on that here), you need to select the file you want to share, choose share, choose “get a link” and then create a link.

Here’s the guest link:

https://retreat-my.sharepoint.com/personal/katiej\_retreat\_onmicrosoft\_com/\_layouts/15/guestaccess.aspx?guestaccesstoken=PGwTbjYxjgofpMWZGdILVEp7dYFkiW%2fK35sQZqNI3z4%3d\&docid=0fb3ee47f64fa49e0828e732992c8fb51

You’ll notice that the guest access token and docid are parameters. You can use this to construct the embed HTML URL as follows:

For example, here’s the PowerPoint session hosted on my Office 365 demo tenant’s that I presented at WPC with my colleague Tanuj Bansal:

So have fun trying some of these tips out! It's clearly not for every scenario, but can be powerful to help tell your story, share content and let your customers analyze data on your web pages.

Condividi tramite

Include Office content in your web pages

Risorse aggiuntive