Bài viết này hướng dẫn bạn cách hiển thị dữ liệu Excel trong bảng HTML bằng SheetJS trong Javascript. SheetJS là một thư viện javascript được sử dụng để làm việc với nhiều định dạng bảng tính khác nhau. Trong một bài viết khác, chúng tôi đã giải thích Chuyển đổi dữ liệu tệp Excel sang JSON bằng thư viện SheetJS trong Javascript. Hôm nay trong bài viết này, chúng tôi sẽ giải thích cách hiển thị dữ liệu bảng tính Excel trong bảng HTML bằng javascript

Ở đây, trước tiên chúng tôi chuyển đổi dữ liệu Excel sang định dạng JSON, sau đó dữ liệu JSON sẽ được hiển thị ở định dạng bảng HTML. Hãy xem làm thế nào nó có thể được thực hiện

Mục lục

Thư viện SheetJS

SheetJS là một thư viện mạnh mẽ được viết bằng Javascript thuần túy. Nó là một Trình phân tích cú pháp và trình ghi cho các định dạng bảng tính khác nhau

Làm cách nào để sử dụng SheetJS?

Vì nó là thư viện javascript nên chúng ta phải đưa nó vào tài liệu HTML để sử dụng thư viện này. Có nhiều liên kết CDN khác nhau có thể được sử dụng để bao gồm nó. Hãy xem một trong các liên kết CDN bên dưới

Now let’s see the below script that we have to include in the tag of the HTML document,

src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js">

Làm cách nào để hiển thị dữ liệu Excel trong Bảng HTML bằng Javascript?

Thực hiện theo các bước dưới đây để hiển thị dữ liệu excel trong bảng HTML

1. Xác định HTML
2. Bao gồm thư viện SheetJS
3. Viết logic Javascript để tải lên và xác thực tệp excel
4. Đọc dữ liệu Excel sang định dạng JSON
5. Chuyển đổi dữ liệu JSON sang bảng HTML

1. Xác định HTML

First, we will define the HTML to allow users to upload an Excel file and display it in tabular format. We will define an HTML  tag with type=”file” to choose an excel file. And a  tag to upload the file and an HTML tag to display the data.

Hãy xác định mã HTML bên dưới trong tệp tài liệu HTML

Upload an excel file to display in HTML Table


Upload  

2. Bao gồm thư viện SheetJS

Bao gồm liên kết CDN của thư viện xlsx. tối thiểu. js trong thẻ 

0 của tệp HTML như sau

3. Viết logic Javascript để tải lên và xác thực tệp Excel

Chúng tôi sẽ xác định một phương pháp

1 javascript để tải lên và xác thực tệp Excel. Phương pháp

1 sẽ chỉ cho phép người dùng tải lên tệp excel hợp lệ. Hãy xem logic bên dưới mà chúng ta phải viết trong thẻ

3

// Method to upload a valid excel file
function upload() {
  var files = document.getElementById('file_upload').files;
  if(files.length==0){
    alert("Please choose any file...");
    return;
  }
  var filename = files[0].name;
  var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase();
  if (extension == '.XLS' || extension == '.XLSX') {
      //Here calling another method to read excel file into json
      excelFileToJSON(files[0]);
  }else{
      alert("Please select a valid excel file.");
  }
}

4. Đọc dữ liệu Excel sang định dạng JSON bằng Javascript

Chúng tôi đã xác định một phương thức javascript

4 sẽ đọc tệp excel và chuyển đổi dữ liệu sang định dạng JSON. Bên trong 

4, chúng tôi đã đọc dữ liệu của tệp excel bằng cách sử dụng trình đọc tệp dưới dạng chuỗi nhị phân bằng phương pháp 

6. Sau đó, chúng tôi đã sử dụng XLSX có tiện ích tích hợp sẵn để chuyển đổi chuỗi nhị phân thành đối tượng JSON. Và phương pháp 

7 được sử dụng để đọc dữ liệu trang tính trong JSON

Hãy xem đoạn mã dưới đây

//Method to read excel file and convert it into JSON 
function excelFileToJSON(file){
		  try {
			var reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = function(e) {

				var data = e.target.result;
				var workbook = XLSX.read(data, {
					type : 'binary'
				});
				var result = {};
				var firstSheetName = workbook.SheetNames[0];
                //reading only first sheet data
				var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
				alert(JSON.stringify(jsonData));
				//displaying the json result into HTML table
				displayJsonToHtmlTable(jsonData);
				}
			}catch(e){
				console.error(e);
			}
}

5. Chuyển đổi dữ liệu JSON sang Bảng HTML bằng Javascript

Bây giờ chúng ta đã định nghĩa một phương thức javascript

8 để hiển thị dữ liệu JSON vào một bảng HTML

Hãy xem mã

//Method to display the data in HTML Table
function displayJsonToHtmlTable(jsonData){
		var table=document.getElementById("display_excel_data");
		if(jsonData.length>0){
			var htmlData='