How to make and publish an interactive Excel file on a website

Excel is a powerful tool for creating spreadsheets and applying formulas from the Microsoft Office package. In it we can save and process the data contained in the cells, in addition to being able to generate graphics that help us to visualize easily. Given its great utility, it is natural to want to publish it on a website. Therefore, here we will teach you how to make and publish an interactive excel file on a website.

An Excel file is often used locally on a desktop or mobile device, but it may be used online by many people. Although we can represent the same content of an Excel Sheet using HTML , CCS, Javascript, JQuery, PHP codes , in a web page, the appearance and operation would be different.

Many people will prefer to display on their website, the content of an Excel as it is seen on your computer; In these cases, the best option is to embed or embed Excel within a web page as an additional object, in this way its content will be seen without changes and it will also allow interaction with visitors through the ordering and filtering of the data.

What is embedding an element on a website?

In the computer world, embedding is understood as the action of embedding a piece of code made with a programming language, inside another code of a different language, which will be shown as one more element of the application; An example of this is appreciated on YouTube, since an MP4 or WEBM video is an object, which is not part of an HTML page.

What is the usefulness of embedding an Excel file on a website?

Embed can help us improve our website , because we can display additional elements that will increase the variety of our content; depending on the type of web page we have, inserting an Excel file could be very useful to easily display statistics graphics and analysis of any kind.

A website with a normal table is less attractive. With Excel  you can change the order of the rows or filter them according to what you want. Which is why it also has a functional, aesthetic, and even SEO positioning utility, since anything that generates interest to visitors translates into a better position in searches.

How to make and publish an Excel file on a website?

To do this you must have the knowledge to access and edit the web page, it can be from cPanel, WordPress, FTP, or any type of file manager you have on your website; in addition to knowing well the HTML tags to know where in the code we are going to embed the Excel file with the <iframe> tag.

The IFRAME tag is the key to embedding any object on a website, including an Excel file. Thanks to the SRC attribute we can tell the page where it should locate an element so that it is displayed where the area delimited between these tags.

We will explain two ways to do this, the first with the Google Docs Viewer service and the other through OneDrive. The code fragment that we must place is the following:

  • <iframe src = »http://docs.google.com/gview?url=http://mysite.com/micarpeta/miexcel.xls&embedded=true» style = »width: 600px; height: 450px; » frameborder = »0 ″> </iframe>

In the SRC attribute we invoke the free Google service to view documents online:

(http://docs.google.com/gview) and we direct you to our website, where we have previously uploaded the Excel file (url = http: //mysite.com/micarpeta/miexcel.xls). Finally we indicate the embedded parameter as true (embedded = true) so that it embeds it.

  • From a OneDrive account, we first upload the Excel file.
  • We copy the code provided by this storage service.
  • By right clicking and going to the “Insert” option.
  • The “What will be displayed” window will open. It has several options and we can check so that users can sort and filter the data, among other things.

In this window, we will see the section “Code to insert” and below the “Copy” button Now we just have to paste the code on our page. Unlike Google Docs Viewer, the URL of the service that we put in the SRC attribute will start with the address “https://onedrive.live.com/embed?”. We hope you can put this knowledge into practice and tell us about your experience

 

Leave a Comment