How do I embed a hosted spreadsheet into a webpage using HTML?
December 21, 2022 8:47 AM Subscribe
Trying to solve a last-minute pressing work problem. I have a webpage in which I want to display/embed a spreadsheet (.xlsx). That spreadsheet is hosted in the assets for the CMS I use for said website/webpage. Webpage is in HTML. I can only find tutorials on how to embed a spreadsheet via OneDrive, but I need to reference this spreadsheet file that's not on OneDrive.
I am a self-taught HTML user, admittedly very basic skills. Our CMS is not a WYSIWYG editor, it's all HTML. We have a spreadsheet we update about once a week, hosted at mywebsite.com/assets/price-spreadsheet.xlsx. We re-upload the spreadsheet to the assets folder when updating; it's not a live link to a shared OneDrive file or Google Sheets or anything. The file name/extension never changes.
I need to embed a view of this spreadsheet on a webpage, e.g. mywebsite.com/info/teapot-prices.html. I am probably just searching poorly, but I need to have this done and published by the end of this week and am not able to find what I need, explained clearly.
How do I do this?
I am a self-taught HTML user, admittedly very basic skills. Our CMS is not a WYSIWYG editor, it's all HTML. We have a spreadsheet we update about once a week, hosted at mywebsite.com/assets/price-spreadsheet.xlsx. We re-upload the spreadsheet to the assets folder when updating; it's not a live link to a shared OneDrive file or Google Sheets or anything. The file name/extension never changes.
I need to embed a view of this spreadsheet on a webpage, e.g. mywebsite.com/info/teapot-prices.html. I am probably just searching poorly, but I need to have this done and published by the end of this week and am not able to find what I need, explained clearly.
How do I do this?
Response by poster: It's not full of formulas or anything, but the spreadsheet has links, formatting, and I'd love for it to have native embedded Excel functionality (sort/filter/search).
I do need it to refer back to the hosted file in the code rather than paste a table, since we update the spreadsheet and not the page itself once the page is built.
posted by rachaelfaith at 8:58 AM on December 21, 2022
I do need it to refer back to the hosted file in the code rather than paste a table, since we update the spreadsheet and not the page itself once the page is built.
posted by rachaelfaith at 8:58 AM on December 21, 2022
That's not going to be an easy task if you can't use M365/One Drive.
You might be able to do it in Javascript.
https://www.webslesson.info/2021/07/how-to-display-excel-data-in-html-table.html
posted by jmsta at 9:25 AM on December 21, 2022
You might be able to do it in Javascript.
https://www.webslesson.info/2021/07/how-to-display-excel-data-in-html-table.html
posted by jmsta at 9:25 AM on December 21, 2022
Best answer: Check out Datawrapper. It's a data visualization platform, but it allows you to create powerful tables. You don't need to know how to code, and it's free to make an account.
Basically, you upload your file to Datawrapper, and then you select a bunch of options about what you want to display. And, it creates an HTML and JavaScript table for you, with search and sort functionality. And, it spits out a snippet of HTML code that you use to embed that into your website.
I don't know if this has everything you need, because I don't know how complex your spreadsheet is, but if it's just a table of stuff, then it'll work fine. Datawrapper can control some table formatting, and the links should be fine (though they'll have to be HTML, not document links).
posted by entropone at 11:20 AM on December 21, 2022
Basically, you upload your file to Datawrapper, and then you select a bunch of options about what you want to display. And, it creates an HTML and JavaScript table for you, with search and sort functionality. And, it spits out a snippet of HTML code that you use to embed that into your website.
I don't know if this has everything you need, because I don't know how complex your spreadsheet is, but if it's just a table of stuff, then it'll work fine. Datawrapper can control some table formatting, and the links should be fine (though they'll have to be HTML, not document links).
posted by entropone at 11:20 AM on December 21, 2022
Best answer: I think the simplest solution is to 1) export the table from Excel as HTML, 2) save it to mywebsite.com/assets/price-spreadsheet.html, and 3) embed that page using an iframe on the CMS page. You'll be able to just update the spreadsheet HTML and the iframe will dynamically load it in as an element on the CMS page.
You may be able to come up with something fancy by exporting your table as a CSV file, saving that to price-spreadsheet.csv, and then using IMPORTDATA in Google Sheets to build an interactive view of it, and embed that into your CMS page. Updating the csv file would then automatically update the Sheet. Probably.
posted by BungaDunga at 12:27 PM on December 21, 2022 [1 favorite]
You may be able to come up with something fancy by exporting your table as a CSV file, saving that to price-spreadsheet.csv, and then using IMPORTDATA in Google Sheets to build an interactive view of it, and embed that into your CMS page. Updating the csv file would then automatically update the Sheet. Probably.
posted by BungaDunga at 12:27 PM on December 21, 2022 [1 favorite]
Best answer: If you could upload your spreadsheet to Google docs as a "sheet" and just use it/update it there from this point forward, that would make the problem easy to solve.
You can then embed that sheet as a view-only, with a bunch of helpful ways to adjust what you do and do not make visible, following the instructions here.
I haven't done this in a while, but I believe the embedded sheet has the normal spreadsheet functionality, like sorting by column etc.
More extensive/real world examples of using this functionality here.
posted by flug at 4:07 PM on December 21, 2022
You can then embed that sheet as a view-only, with a bunch of helpful ways to adjust what you do and do not make visible, following the instructions here.
I haven't done this in a while, but I believe the embedded sheet has the normal spreadsheet functionality, like sorting by column etc.
More extensive/real world examples of using this functionality here.
posted by flug at 4:07 PM on December 21, 2022
Response by poster: We don't have approval to upload the spreadsheet anywhere else, unfortunately. For Reasons, until approved otherwise, it's gotta stay hosted on our own website.
posted by rachaelfaith at 4:28 PM on December 21, 2022
posted by rachaelfaith at 4:28 PM on December 21, 2022
What's your CMS system? The main issue here is that you need something to run the excel file within a browser so that you can interact with it - either by adding javascript support, a feature of your current CMS, or another third-party solution you can install as an extension to your CMS or separately. Do you have the ability to install anything else on the server holding your CMS, or to the CMS itself?
posted by dorothyisunderwood at 1:42 AM on December 22, 2022
posted by dorothyisunderwood at 1:42 AM on December 22, 2022
Best answer: As others have suggested, this is one of those things that sounds simple "I just want to embed this spreadsheet!" but might be impossible, as it stands. There's no way to embed an uploaded Excel file in a web page using HTML alone.
You either need your CMS to have the ability to import or transform a spreadsheet file in such a way as it can be embedded in the page, or use JavaScript to transform the spreadsheet in the browser (like jmsta's suggestion), or have the spreadsheet somewhere else online (Google Sheets etc), that can be embedded in your page using an iframe (if your CMS allows that).
posted by fabius at 6:47 AM on December 22, 2022 [1 favorite]
You either need your CMS to have the ability to import or transform a spreadsheet file in such a way as it can be embedded in the page, or use JavaScript to transform the spreadsheet in the browser (like jmsta's suggestion), or have the spreadsheet somewhere else online (Google Sheets etc), that can be embedded in your page using an iframe (if your CMS allows that).
posted by fabius at 6:47 AM on December 22, 2022 [1 favorite]
Not possible as described. OneDrive actually uses Office 365 (the web version) to load the sheet "online". A Spreadsheet requires a lot of background work, and you need SOME sort of online office, like Google Sheets or Excel Online (part of Office 365) or their equals (Zoho Office Calc, etc.) to make the sheet "usable" with links and everything.
If all you have is HTML, the best you can do is export the sheet to HTML table and embed that. And you just get a table, losing all the Excel functionality.
posted by kschang at 12:10 PM on December 22, 2022
If all you have is HTML, the best you can do is export the sheet to HTML table and embed that. And you just get a table, losing all the Excel functionality.
posted by kschang at 12:10 PM on December 22, 2022
Response by poster: Thanks, everyone. I'm seeking permission to use OneDrive or Google Sheets instead. I did experiment with exporting the sheet to HTML (didn't look great) and JavaScript (couldn't get it to work right, user error I'm sure) so I've gone with the backup plan to simply link to the hosted spreadsheet until we get approval to use a solution with native embed integration.
posted by rachaelfaith at 4:52 PM on December 22, 2022
posted by rachaelfaith at 4:52 PM on December 22, 2022
This thread is closed to new comments.
https://tableizer.journalistopia.com/
Alternatively you can save from Excel as HTML your CMS may not like the code that this method generates.
posted by jmsta at 8:53 AM on December 21, 2022