Embedding Excel dashboards in a web page is a great way to securely share reports. All you need to do is save your file on OneDrive or SharePoint and get the embed code. There are different approaches required depending on whether you have OneDrive Personal, or OneDrive for Business or SharePoint. The latter two offer more security and bigger file sizes.
Table of Contents
- Embedding Excel Dashboards in a Web Page Video
- OneDrive for Business or SharePoint Process
- OneDrive for Business or SharePoint Embed Code
- Iframe Size Parameters
- Dashboard Presentation Parameters
- Excel Web App for OneDrive for Business or SharePoint
- OneDrive Personal Process
- Excel Web App for OneDrive Personal
- OneDrive Personal Embed Code
- OneDrive Personal JavaScript
- Embedding Excel Dashboards in a Web Page Limitations
Watch the Video
[Update] The OneDrive Personal account interface has changed slightly to what is shown in the video above. The process below is updated accordingly.
Embedding Excel Dashboards in a Web Page - Written Instructions
First, I recommend that you define a name for the cells containing the dashboard in your workbook as this will enable you to specify just that cell range to be displayed in the web page.
OneDrive for Business or SharePoint Process
Locate your file on OneDrive for Business or SharePoint and click the Share icon:
Next, click on the cog icon (1) to customise the link. My default is ‘anyone with the link can view’ but yours might be different:
IMPORTANT: If you’re embedding the workbook in a web page, then you’ll want to set the permissions to ‘Anyone with the link’ (2).
It’s possible that your SharePoint admin has blocked the option to allow anyone with the link to view the workbook. If so, you will need to consult your administrator.
TIP: If you want to prevent the workbook from being downloaded, check the ‘block download’ button in More Settings (3).
Once you’ve chosen the settings, click Apply and then copy the link:
It should look something like this:
https://yourdomain.sharepoint.com/:x:/g/personal/your_account_name/Ebb8wJNS4c9Ek7v2AE_BasEBSva-RhFqnL9pKJONWkFXYZ?e=auWtrP
Embed Code
To use this link in a web page you need to wrap it in iframe HTML tags like so:
<iframe src="https://yourDomain.sharepoint.com/:x:/g/personal/your_account_name/Ebb8wJNS4c9Ek7v2AE_BasEBSva-RhFqnL9pKJONWkFXYZ?e=auWtrP&action=embedview&wdbipreview=true "></iframe>
Iframe Size Parameters
We can add further parameters to the iframe that control how the dashboard is displayed in the web page.
For example, with the following additions you can specify the iframe size in pixels to suit your dashboard so there are no scroll bars:
<iframe width="500" height="200" frameborder="0" scrolling="no" src="https://yourDomain.sharepoint.com/:x:/g/personal/your_account_name/Ebb8wJNS4c9Ek7v2AE_BasEBSva-RhFqnL9pKJONWkFXYZ?e=auWtrP&action=embedview&wdbipreview=true "></iframe>
Dashboard Presentation Parameters
You can also control how the dashboard appears with the following parameters which get appended to the end of the URL with an ampersand:
| URL Parameter | Effect | Default |
| wdHideSheetTabs=True | Hides the sheet tabs that are displayed at the bottom of all sheets in a workbook. | False |
| wdAllowInteractivity=True | Lets you interact with the data if your workbook has a table or PivotTable that can be sorted and filtered. | True |
| Item=itemName | Displays a specific item. If your workbook includes a chart, table, PivotTable, or named range, and you want to display only one of the items in your web page, use the Item parameter to specify that item. | Not set |
| ActiveCell=CellName | Specifies the active (selected) cell in the embedded workbook when the web page opens. You can specify the active cell by cell reference (such as A1) or by name. You can also use this parameter to define the active sheet by selecting a cell in that sheet. If you don't specify the active cell, the last saved view will be shown. | The last saved view will be shown. |
| wdHideGridlines=True | Hides worksheet gridlines for a cleaner look. | False |
| wdHideHeaders=True | Hides the column and row headers. | False |
| wdDownloadButton=True | Includes the Download button so viewers can download their own copy of the workbook. |
In my code (below) I’ve included the following:
- Allowed interactivity so the Slicers work
- Hidden the sheet tabs and headers
- Specified the item name as the defined name: dashboard
- Set the active cell to one at the bottom of the defined name area so it’s not displaying in the top left by default
- I already have gridlines turned off in the Excel file page set up, so no need for this
- I don’t want people to be able to download the file, so I’ve omitted this as well as set it in the sharing permissions
My final code looks like this:
<iframe width="500" height="200" frameborder="0" scrolling="no" src="https://yourDomain.sharepoint.com/:x:/g/personal/your_account_name/Ebb8wJNS4c9Ek7v2AE_BasEBSva-RhFqnL9pKJONWkFXYZ?e=auWtrP&action=embedview&wdbipreview=True&wdAllowInteractivity=True&wdHideSheetTabs=True
&Item=dashboard&wdHideHeaders=True&ActiveCell=A35"></iframe>
Excel Web App for OneDrive for Business or SharePoint
When you load the web page, you’ll see that the bottom of the embedded dashboard has a black bar called the viewer bar. The viewer bar contains some icons that will differ depending on whether your file is saved on OneDrive for Business/SharePoint or OneDrive Personal, as well as what sharing options you allowed:
In OneDrive for Business or SharePoint, with the settings I applied in this example, the viewer bar contains the following icons:
- The Excel icon on the far left opens Office.com.
- The next icon to the right enables the user to refresh the connection to the source file and get updates, although this didn't work for me! You can also refresh the web page to get updates.
- The last icon on the right enables you to give Microsoft feedback about the embedded spreadsheet, although when I click it for OneDrive for Business/SharePoint embedded files, nothing happens!
IMPORTANT: if you use incognito mode or Safari, you will not be able to see embedded workbooks saved on OneDrive for Business or SharePoint without logging in, so it’s best to avoid those options.
OneDrive Personal Process
[Update] The OneDrive Personal account interface has changed slightly to what is shown in the video above. The process below is updated accordingly.
The process for files saved on OneDrive Personal accounts is slightly different. Start by opening the file in OneDrive online, then on the File tab, select Share, then Embed.
In the Embed screen you can select what you want to show. In this example file I have:
- defined a name called Slicer_chart that I want to display
- I’ve deselected ‘include a download link (however, you’ll see that this is useless with the iframe code, but more on that later)
- And I’ve allowed people to sort and filter
- Set the starting cell to one that’s hidden behind the Slicer.
Note: at step 5 you can choose from an iframe embed code format, or JavaScript by clicking the links above the code snippet.
Once you’re happy with your settings, copy the code to your web page and adjust the height and width parameters as required.
Note: even though you may have selected no scrolling, you’ll find that the web app completely ignores this despite how big you make the dimensions, likewise for the area to display!
Excel Web App for OneDrive Personal
The icons in the Viewer Bar (the black bar at the bottom) are slightly different with OneDrive Personal files vs OneDrive for Business and SharePoint. They also differ depending on whether you used the Embed code or JavaScript.
OneDrive Personal Embed Code
We’ll look at the embed code experience and functionality first. You can see in the image below there are scroll bars even though I chose no scrolling. Also, the area visible when scrolling far exceeds cells in the specified defined name, so it appears there are some issues with the web app rendering the workbook correctly.
The viewer bar at the bottom also has some additional icons that differ to the OneDrive for business or SharePoint experience:
- Launches Excel Online but doesn’t open the workbook unless you are the owner, and you are logged in to your OneDrive account.
- Refreshes the connection to the workbook.
- Is a link to give Microsoft feedback about the web app.
- Enables you to get the URL to the workbook which will open it in Excel Online. You can also get the embed code here.
- Opens the file in Excel Online where you can download a copy of the file and then edit it as you wish.
OneDrive Personal JavaScript
The JavaScript code offers more protection with the viewer bar not including any way for the user to open the file in Excel Online (unless you’re the file owner) or download it:
- Launches Excel Online but doesn’t open the workbook unless you are the owner, and you are logged in to your OneDrive account.
- Link to give Microsoft feedback about the web app.
- Is supposed to give you the URL to the workbook which will open it in Excel Online and the embed code, but the link does nothing when clicked!
Notice that there’s no Refresh button, but if you refresh the browser page it gets the updated version of the file from OneDrive.
Embedding Excel Dashboards in a Web Page Limitations
With OneDrive for Business or SharePoint you can embed a file up to 10MB in size with up to 1000 concurrent viewers.
Heavy traffic on the embedded workbook might result in some viewers being throttled. And the availability of an embedded workbook can be impacted by the number of embedded workbooks in the data center or tenant.
With OneDrive Personal the limit is 5MB. I couldn’t find any documentation on the number of concurrent viewers, but I suspect it won’t be more than 1000, and could be less.
OneDrive Personal embedded workbooks using the Embed code are not secure, however OneDrive Personal embedded workbooks using the JavaScript are secure.
Below is a summary table of the differences:
Hello. Great learning web site. Thank you.
I have a personal onedrive account. In onedrive I open the worksheet of interest, then I choose File/share/embed and I have access to the iframe embed code or JavaScript embed code. I want to use Javascript because it deactivates the bottom header microsoft links. When I copy the javascript code into wordpress, I am able to view and manipulate the worksheet ON MY DESKTOP. However, on my iphone, the embed area is blank…not coming through for some reason. I tried it on another phone. Same thing. Doesnt work in ipad either. But like I said it works on my desktop.
Any ideas what might be going on and how I can fix this.
Regards,
Waleed
Thanks…good stuff…thank you.
They removed the javascript code generation option for personal Onedrive Users.
And I dont want to use the onedrive provided embed code because of the ability of anyone to download the spreadsheet from the links in the black header at the bottom of the viewing pane (as you noted).
So I have javascript code that works (found something online and was able to make it work) but I am unable to tell it to only show a named range in a particular sheet of the workbook. Is there a way to do this?
Here is the javscript embed code I used in Wordpress and it works, but like I said, I don’t know how to add additional code to have the viewer only see a selected named cell range in a specific tab of that workbook:
Any ideas?
Kind Regards
Waleed
Did you try using the Item parameter (see table in post above called ‘Dashboard Presentation Parameters’? If that doesn’t work, then I’m out of ideas, sorry.
Thanks for quickly responding. You guys are prolific and good.
I figured out part of my problem. I don’t know if I missed this or it was something recently modified by Onedrive people. Regardless, with Personal Onedrive there are two ways to get code to embed an excel workbook into wordpress:
(option 1) Right click on excel workbook in Onedrive and choose Embed. This option will only give you the iframe embed code (it works)
(option 2) Actually open the workbook and then choose File/Share/Embed. Now you get the customization screen and and option to choose iframe code or Javascipt.
So in my case, I added the Javascript code to wordpress. I was able to see the embedded file using my DESTOP. BUT, when I tried to access via my iphone, I get a big old blank where the sheet should have been embedded. PS. I also tried using the iframe code and when I did this I was able to view on both my desktop and my iphone. Weird.
Any thoughts on this one. Has anyone chirped about this one?
Kind regards,
Waleed
Looks like the interface has changed slightly because the ‘Customize how this embedded workbook will appear to others’ has disappeared from the embed pane that opens after right-clicking the file name and selecting ’embed’. Thanks for letting me know.
As for why it won’t display in the browser when you use Javascript, I wonder if it works in any other browsers. e.g. it might be a Safari issue, but works in Chrome.
Thanks so much for getting back so quickly!
re Why I see the (Javascript) embedded sheet in chrome and not on iphone (safari)…
I will share with you anything I learn on this.
Cheers,
Waleed
Hello, your video and website have expanded by excel skillset tremendously just within one day. Thank you so much! I am having issues with the embedding of a dashboard I made into a Microsoft sway report. I have used all of the html code you suggested for sharing from SharePoint. However, the coded parameters for only sharing the item named dashboard, hiding headers, and hiding sheets aren’t actually working. The entire sheet is showing up, all tabs, and it’s still editable. Also the dynamic labels aren’t showing up at all. Any thoughts on what might be the issue?
Hi Noelle,
I’m not familiar with Sway enough to have any ideas, sorry. I’d reach out to the Sway support forum.
Mynda
Hi!
Thank you for your help in writing this great article and video! It really helps me a great deal!
I have followed your instructions and managed to embed the javascript on my wix website. It is working well on all devices except on iPads.
Can I know why there are not showing up on iPads? The viewer bar can be seen but not the embedded excel.
Thank you for replying to my question as I have searched through the internet for hours and have not found a solution.
Appreciate your kind reply! Thank you!
From memory, Issac, the Excel web app doesn’t work on an iPad. You’d have to allow your users to open the file in Excel Online if they need to use iPads. i.e. you can’t embed it in a web page.
Thanks for the prompt reply!
When it’s embedded using HTML, it will show on iPad. However, it does not show up when it’s embedded using JavaScript.
I choose JavaScript as I do not wish for the excel to be accessed offline or downloaded.
Hopefully there’s a solution!
Thank you for your great tutorial tor educate me on this!
I don’t know of a solution for JavaScript embedding on the iPad, sorry.
It’s ok. Thank you so much for your help and guidance!
I got my Java code to work embedding an Excel file in a web page from a personal OneDrive.
The Excel file interactivity is amazing.
However, if I use the web browsers print function, the Excel window shows up blank.
Is there some setting / html code in order to get the embedded Excel window to print?
Hi Joshua,
It’s probably because the Excel workbook is loaded in an iframe and as such isn’t actually part of the web page you are asking the browser to print. An iframe loads one web page inside another, the browser seems to only print the top level web page, not the iframe contents.
There does seem to be some workarounds but they look like they require custom JavaScript programming. You can read more in this article trouble printing iframes
Regards
Phil
Thanks Phil. I am using my personal OneDrive for now (my company’s OneDrive does not allow sharing with all) and I was trying to avoid having the Excel file downloadable. So I used the Javascript code from Excel which uses the div code (secure) rather than the iframe code (I think the Excel file is downloadable under this method).
I have tested code to get a div with simple text in it to print. But when I use my Excel div coding, it shows up blank at best. I can screen shot the web page and I myself would know how to print from a screen shot. But I do not know how to automate it for an end user with a single click (I have looked at some code for this too).
Have you ever been able to get the div coding to print in these circumstances? Is there a solution that does not allow the end user to download the Excel file, but somehow gets the printer to print what the end user is seeing?
Thanks for any help!
Josh
Sorry Josh I’ve never had to deal with this issue so don’t have a solution. Not sure why the browser isn’t just printing what is on screen.
regards
Phil
This was a really useful video. Are you able to embed sheets that have macros or userforms as well?
Glad it was helpful. VBA/Userforms are not executable on the web, so no point in embedding sheets that contain these features.
When I use the embed code on a webbpage an extra space is created above the Excel sheet, within the iframe. The space is also created in the prewiev box in the settings.
Could it be a bug or something in Excel causing this?
I haven’t noticed this with mine, so I suspect it’s in the Excel sheet or the range you’ve specified.
I can’t believe that the error is in the excel file itself, I get the same error in all different types of excel files, independent of each other, that I want to embed. Files that also worked before have suddenly got the error. Also, when I use the javascript instead, there is no error, then the embedded file appears as it should.
Hello, great job …thank you.
I followed your advice and it works for Embeded code.
However if i use JavaScript code and paste it into web, the script is appeared on the web instead of excel sheet.
Can you please show me how to embed JavaScript on web? thank you.
Hi,
If the iframe code works then I don’t know why the JavaScript does not.
If you are seeing the JS code on the web page, it sounds like it’s being treated as plain text. Is the JS code wrapped in
tags?
If you don’t get this fixed, please provide a link to a page with the issue so I can check it.
Regards
Phil