Embed Excel Sheet In HTML - Lei Mao's Log Book
Có thể bạn quan tâm
Introduction
In some use cases, we have a complicated Excel sheet to share on our personal website and we would like to make it interactive. Fortunately, Microsoft allows the user to do so via OneDrive and it supports both HTML iframe and JavaScript.
In this blog post, I would like the discuss how to embed Excel sheet in HTML, the issues that I encountered, and how to fix the issues.
Embed Excel Sheet in HTML
Generate Code
Once the Excel sheet has been created or uploaded to Microsoft OneDrive, generating the Excel embed code could be as easy as clicking File → Share → Embed → Generate HTML.
Insert Code
Then we could copy the HTML iframe code or the JavaScript code and insert it into our website.
Using the default HTML iframe code will result in an embedded Excel sheet as follows. If you see lots of white spaces before the table, it is a bug from Microsoft and the bug will show in most of the browsers except the Brave browser.
1234567 | <iframe width="402" height="346" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=6C685993F809A9F8%212757&authkey=%21AABR6KgqMF_ImYs&em=2&wdAllowInteractivity=False&AllowTyping=True&wdDownloadButton=True&wdInConfigurator=True&wdInConfigurator=True&edesNext=true&ejss=false"></iframe> |
Using the default JavaScript code will result in an embedded Excel sheet as follows.
123456789 | <div id="myExcelDiv" style="width: 402px; height: 346px"></div><!-- * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the * Excel Web App into a div with id=myExcelDiv. The full API is documented at * https://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get * values from your Excel file and how to use the rest of the object model. --><script type="text/javascript" src="https://onedrive.live.com/embed?resid=6C685993F809A9F8%212757&authkey=%21AABR6KgqMF_ImYs&em=3&wdDivId=%22myExcelDiv%22&wdDownloadButton=1&wdAllowInteractivity=0&wdAllowTyping=1"></script> |
Fix JavaScript Issues
The width of the embedded Excel sheet seems to be a problem, but we could modify the width values in the style. A bigger problem is, unlike the iframe embedding, the JavaScript embedding does not allow the user to input values and one HTML can only have one Excel sheet embedded (without problems) because the div id is a pre-defined value myExcelDiv.
Personally, I favor the JavaScript embedding over the HTML iframe embedding. So we would like to try solving those problems on our own.
We noticed that there is an argument wdAllowInteractivity=0 in the src for both JavaScript and iframe, although it does not prevent the user from typing in iframe, changing it to 1 allows the user to type successfully.
In addition, wdDivId=%22myExcelDiv%22 is the place for specifying custom div id for embedding Excel sheets. We could use new div id here.
Finally, we can also make the webpage opening a little bit faster by making the loading of JavaScript async.
Fix Preview
The fixed JavaScript code is as follows. We could see that now the embedded Excel sheet looks pretty nice.
123456 | <div id="myExcelDiv1" style="width: 100%; height: 400px"></div><script type="text/javascript" src="https://onedrive.live.com/embed?resid=6C685993F809A9F8%212757&authkey=%21AABR6KgqMF_ImYs&em=3&wdDivId=%22myExcelDiv1%22&wdDownloadButton=1&wdAllowInteractivity=1&wdAllowTyping=1" async></script> |
Từ khóa » Excel Nhúng
-
Nhúng Một Sổ Làm Việc Excel Trên Trang Web Hoặc Blog Từ OneDrive ...
-
Nối Kết Hoặc Nhúng Dữ Liệu Excel Vào Dự án - Microsoft Support
-
Cách Nhúng Bảng Tính Excel Vào Website
-
Cách Nhúng Một Trang Tính Excel Vào Trang Web Của Bạn
-
Chèn, Nhúng Dữ Liệu Vào Excel
-
Nhúng Bảng Tính Excel Vào Website | Tủ Sách Vàng - YouTube
-
Cách Nhúng Bảng Tính Excel Vào Website - YouTube
-
Di Chuyển Trang Tính Excel Trực Tuyến, Chia Sẻ, Nhúng Mã Trên Trang ...
-
3 Ways To Embed A PDF Document In Microsoft Excel
-
Embed Excel Into The Request Form - Zendesk Help
-
How To Embed Excel (or Google Sheets) Tables Into HTML
-
Embed An Excel Chart In Powerpoint - CustomGuide
-
How To Embed An Excel Flowchart In Microsoft Word - BreezeTree
-
Insert Excel Into A Word Document - The Training Lady