Hướng dẫn how do i display data from excel table in html? - làm cách nào để hiển thị dữ liệu từ bảng excel trong html?

Trong hướng dẫn này, bạn có thể tìm cách đọc tệp Excel bằng JavaScript và hiển thị dữ liệu trang tính Excel trên trang web ở định dạng bảng HTML bằng JavaScript. Trước đây, một trong những hướng dẫn của chúng tôi, trong đó chúng tôi đã thấy cách chuyển đổi dữ liệu bảng HTML thành tệp Excel bằng cách sử dụng thư viện SheetJS. Bây giờ trong hướng dẫn này, chúng tôi cũng sẽ sử dụng Thư viện JavaScript SheetJS và bằng cách sử dụng thư viện JavaScript, chúng tôi sẽ chuyển đổi dữ liệu tệp Excel thành bảng HTML và hiển thị trên trang web. Ở đây theo hướng dẫn này, chúng tôi sẽ không sử dụng tập lệnh bên JQuery và Ajax Server để tìm nạp dữ liệu từ Excel và hiển thị trên trang web. Bây giờ hãy bắt đầu nhìn thấy nó!SheetJS library. Now in this tutorial also we will use SheetJS JavaScript library and by using JavaScript library, we will convert Excel file data to HTML table and display on web page. Here under this tutorial, we will not use jQuery and Ajax server side script for fetch data from excel and display on web page. Now lets start seeing it!

Đầu tiên chúng tôi phải bao gồm liên kết Bootstrap StyleSheet và SheetJS tại tiêu đề của trang HTML của chúng tôi.

Sau đó, trong trang HTML này, chúng tôi phải tạo một thẻ tệp để chọn tệp excel từ máy tính cục bộ.

Và bên dưới tệp này, chúng tôi phải tạo một thẻ phân chia để hiển thị dữ liệu bảng excel trên trang web ở định dạng bảng HTML.

Tiếp theo, chúng ta phải di chuyển vào mã JavaScript, vì vậy, đầu tiên lưu trữ Thẻ thẻ tệp dưới một biến.

const excel_file = document.getElementById('excel_file');

Tiếp theo chúng ta phải viết mã JavaScript trên sự kiện thay đổi, vì vậy khi người dùng đã chọn tệp từ máy tính cục bộ bằng thẻ tệp, thì mã JavaScript phải được thực thi.

excel_file.addEventListener('change', (event) => {

});

Theo mã sự kiện thay đổi này trước tiên, chúng tôi muốn kiểm tra định dạng tệp đã chọn là .xls hoặc .xlsx. Nếu tệp đã chọn không phải là tệp Excel thì nó sẽ hiển thị lỗi trên trang web và nếu chọn tệp là excel thì nó sẽ tiến hành hiển thị dữ liệu tệp Excel trên trang web.

if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '
Only .xlsx or .xls file format are allowed
';

        excel_file.value = '';

        return false;
    }

Sau khi kiểm tra lỗi xác thực, bây giờ đọc tệp bằng đối tượng Filereader. Ở đây tệp phải được đọc ADS ArrayBuffer bằng cách truyền đối tượng tệp bằng Event.Target.Files [0].

var reader = new FileReader();

reader.readAsArrayBuffer(event.target.files[0]);

Nếu tệp đã chọn là tệp excel thích hợp thì chúng ta cần chuyển đổi những gì chúng ta có từ đối tượng Filereader sang đối tượng Unit8array bằng cách chuyển kết quả của Filereader thành Trình xây dựng Unit8array.

var data = new Uint8Array(reader.result);

Tiếp theo, chúng tôi đã vượt qua dữ liệu đơn vị8Array này trong hàm read () funit () và nó sẽ trả về đối tượng sổ làm việc excel đã chọn.

var work_book = XLSX.read(data, {type:'array'});

Sau khi nhận được đối tượng sổ làm việc, tiếp theo chúng ta phải lấy tên trang của tệp Excel đã chọn. Vì vậy, ở đây Biến số trang tính sẽ trả về tên trang tính ở định dạng mảng.SheetNames variable will return sheet name in array format.

var sheet_name = work_book.SheetNames;

Khi chúng tôi đã nhận được tên trang tính, bây giờ chúng tôi muốn lấy dữ liệu trang đầu tiên ở định dạng JSON, vì vậy điều này chúng tôi có thể nhận được bởi chức năng SheetJS sheet_to_json () bằng cách chuyển tên bảng đầu tiên.

Khi chúng tôi đã nhận được dữ liệu tờ đầu tiên ở định dạng JSON, tiếp theo chúng tôi chỉ cần viết mã JavaScript và chuyển đổi dữ liệu JSON đó thành định dạng HTML và hiển thị trong thẻ phân chia wih id excel_data. Vì vậy, nó sẽ hiển thị dữ liệu tệp Excel trên trang web ở định dạng bảng HTML.excel_data. So it will display excel file data on web page in HTML table format.

Vì vậy, một khi bạn đã làm theo tất cả các bước trên thì bạn có thể kiểm tra Ouput trong trình duyệt. Vì vậy, khi chúng tôi chọn tệp excel thì nó sẽ hiển thị dữ liệu bảng Excel trên trang web ở định dạng bảng HTML mà không cần làm mới trang web. Vì vậy, trong hướng dẫn này, chúng tôi đã thấy cách chuyển đổi tệp Excel sang bảng HTML ở phía máy khách bằng cách sử dụng thư viện JavaScript SheetJS ở phía máy khách. Dưới đây bạn có thể tìm thấy mã nguồn đầy đủ.

Mã nguồn đầy đủ

Làm cách nào để lấy dữ liệu từ bảng tính Excel trong HTML?

Làm thế nào để tôi có được Excel để hiển thị dữ liệu trên một trang web?

Làm cách nào để liên kết Excel với HTML?