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.
Watch the Video
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 default setting (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 Other 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
The process for files saved on OneDrive Personal accounts is slightly different. Start by right-clicking the file in OneDrive, then select Embed:
The embed pane will open on the right. Click the ‘customize how this embedded workbook will appear to others’ link at the bottom:
In the customize 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:
Conditional Formatting in Power BI Tables and Matrices
Issac Lee
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!
Mynda Treacy
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.
Issachar Lee
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!
Mynda Treacy
I don’t know of a solution for JavaScript embedding on the iPad, sorry.
Issac Lee
It’s ok. Thank you so much for your help and guidance!
Joshua Allmen
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?
Philip Treacy
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
Joshua Allmen
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
Philip Treacy
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
Krista
This was a really useful video. Are you able to embed sheets that have macros or userforms as well?
Mynda Treacy
Glad it was helpful. VBA/Userforms are not executable on the web, so no point in embedding sheets that contain these features.
Stefan Andersson
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?
Mynda Treacy
I haven’t noticed this with mine, so I suspect it’s in the Excel sheet or the range you’ve specified.
Stefan Andersson
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.
San Linn
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.
Philip Treacy
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