CODEWITHSUNDEEP
htmlcssexcelwordpressiframe
user7219004
user7219004

Reputation: 21

Remove bottom bar from Excel Embed iFrame

I want to embed an Excel sheet with formulas and some calculation to a Wordpress site. I managed to setup and display the sheet and able to interact with it live on my site. The guide I used to embed is as follows: https://support.office.com/en-us/article/Share-it-Embed-an-Excel-workbook-on-your-web-page-or-blog-from-OneDrive-804e1845-5662-487e-9b38-f96307144081?CorrelationId=2f1048d2-df73-470f-b3a5-c65576288a04&ui=en-US&rs=en-US&ad=US&ocmsassetID=HA102029502

Now, I just need one help that is to remove the bottom black bar that comes preloaded with the Microsoft embed code. Please refer below, where I have highlighted in red. The reason for me to remove that is to prevent users from downloading the Excel from my site.

The bottom black bar

Upvotes: 2

Views: 8188

Answers (1)

Soul Eater
Soul Eater

Reputation: 505

I know is a really old question, but I hope this helps someone in the future: As you may realized when "inspecting" the element in the browser it happens that the excel embed has another iframe inside! This iframe has an ID called "WebApplicationFrame", and bottom bar is inside this second iframe.
I tried to add a "display: none" to the bar with JS to hide it, but for some reason it doesn't work. So the way I achieved this was doing bigger the height of "WebApplicationFrame":

<iframe id="excel-iframe" scrolling="no" src="YOUR_EXCEL_EMBED_URL" width="600" height="500" frameborder="0"></iframe>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#excel-iframe").load(function() {
         $(this).contents().find("#WebApplicationFrame").css("height", "550px");
      });
   });
</script>

Notice in my code that the iframe where you are embedding the excel has a height of 500 (pixels) and in the Javascript code I'm giving the iframe within a height of 550px. This way the bottom bar of the internal iframe is out of viewport.

Now, maybe you don't care about hiding the bottom bar and you may only want to disable the "download" button. If you watch your embed URL there's a part in it which says: 

&wdDownloadButton=True

you just need to change True for False and the download button will be disabled:

&wdDownloadButton=False

Upvotes: 2

Related Questions