Chấp nhận tệp excel trong html

Trong một số trường hợp sử dụng, chúng tôi có một trang tính Excel phức tạp để chia sẻ trên trang web cá nhân của mình và chúng tôi muốn làm cho nó có tính tương tác. May mắn thay, Microsoft cho phép người dùng làm như vậy thông qua OneDrive và nó hỗ trợ cả HTML

<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>

3 và JavaScript

Trong bài đăng trên blog này, tôi muốn thảo luận về cách nhúng trang tính Excel vào HTML, các sự cố mà tôi gặp phải và cách khắc phục sự cố

Nhúng trang tính Excel vào HTML

Tạo mã

Khi trang tính Excel đã được tạo hoặc tải lên Microsoft OneDrive, việc tạo mã nhúng Excel có thể dễ dàng bằng cách nhấp vào Tệp → Chia sẻ → Nhúng → Tạo HTML

Nhập mã

Sau đó, chúng tôi có thể sao chép mã HTML

<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>

3 hoặc mã JavaScript và chèn mã đó vào trang web của chúng tôi

Sử dụng mã HTML

<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>

3 mặc định sẽ dẫn đến một trang tính Excel được nhúng như sau. Nếu bạn thấy nhiều khoảng trắng trước bảng, đó là lỗi từ Microsoft và lỗi này sẽ hiển thị ở hầu hết các trình duyệt ngoại trừ trình duyệt Brave

1

<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>

Sử dụng mã JavaScript mặc định sẽ dẫn đến một trang tính Excel được nhúng như sau.

1
2
3
4
5
6

<div id="myExcelDiv" style="width: 402px; height: 346px">div>

<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>

Khắc phục sự cố JavaScript

Chiều rộng của trang tính Excel được nhúng dường như là một vấn đề, nhưng chúng ta có thể sửa đổi các giá trị chiều rộng theo kiểu. Một vấn đề lớn hơn là, không giống như nhúng

<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>

3, nhúng JavaScript không cho phép người dùng nhập các giá trị và một HTML chỉ có thể nhúng một trang tính Excel (không có vấn đề gì) vì div

<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>

0 là một giá trị được xác định trước

<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>

1

Cá nhân tôi thích nhúng JavaScript hơn nhúng HTML

<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>

3. Vì vậy, chúng tôi muốn thử tự mình giải quyết những vấn đề đó

Chúng tôi nhận thấy rằng có một đối số

<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>

3 trong

<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>

4 cho cả JavaScript và

<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>

3, mặc dù nó không ngăn người dùng nhập vào

<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>

3, việc thay đổi nó thành

<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>

7 cho phép người dùng nhập thành công

Ngoài ra,

<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>

8 là nơi chỉ định div tùy chỉnh

<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>

0 để nhúng trang tính Excel. Chúng ta có thể sử dụng div mới

<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>

0 tại đây

Cuối cùng, chúng ta cũng có thể làm cho trang web mở nhanh hơn một chút bằng cách tải JavaScript

1
2
3
4
5
6

1

Sửa bản xem trước

Mã JavaScript cố định như sau. Chúng ta có thể thấy rằng bây giờ trang tính Excel được nhúng trông khá đẹp