Cách làm việc với Javascript đọc file excel Trong trang này, chúng ta sẽ xem cách chúng ta có thể đọc tệp excel bằng Javascript Các công cụ kiểm tra tự động dựa trên Javascript ngày càng trở nên phổ biến. Điều này đã tạo ra nhu cầu về các kỹ sư tự động hóa chuyên gia tiếp xúc với Javascript. Đọc và ghi tệp excel là một trong những phần quan trọng nhất của tự động hóa thử nghiệm vì chúng tôi có xu hướng lưu trữ dữ liệu đầu vào/đầu ra của mình trong tệp excel Đọc thêm để biết cách Javascript có thể thực hiện các thao tác đọc tệp excel. Trên trang này, chúng tôi có danh sách các chức năng cho khả năng đọc tệp Excel bằng Javascript, chẳng hạn như Lấy dữ liệu từ Excel, Lấy số lượng hàng từ một trang tính Excel, Lấy dữ liệu Tiêu đề của một trang tính Excel, v.v. sử dụng JavaScript. Chúng tôi mở và đọc tệp trang tính excel bằng trường nhập hoặc sử dụng dropbox trong đó chúng tôi chọn tệp xlsx theo cách thủ công và sau đó, chúng tôi đọc tệp đó, nếu chúng tôi muốn tự động tải dữ liệu tệp cụ thể khi tải trang thì sao?. Vì chúng tôi biết rằng việc mở trực tiếp bất kỳ tệp nào bị hạn chế, vì vậy để giải quyết vấn đề này, chúng tôi cần sử dụng API tìm nạp và đảm bảo rằng máy chủ cục bộ của bạn đang chạy. Trong phần này, chúng ta sẽ xem cách chúng ta có thể tìm nạp dữ liệu tệp xlsx bằng cách sử dụng tìm nạp và trang tính. js và bao gồm xlsx. đầy. tối thiểu. js trong thư mục làm việc của bạn và liên kết tới html Sau khi liên kết tệp js, hãy thêm mã
Trang tính XLSX trang tính execl Nhập dữ liệu bằng JavaScript Sheetjs tìm nạp tệp xlsx javaScript tìm nạp api nhập dữ liệu excel
Trong hướng dẫn này, bạn có thể tìm hiểu 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. Trong phần trước, một trong những hướng dẫn của chúng ta, trong đó chúng ta đã thấy cách chuyển đổi dữ liệu bảng HTML sang 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 SheetJS JavaScript 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 sang bảng HTML và hiển thị trên trang web. Ở đây trong hướng dẫn này, chúng tôi sẽ không sử dụng tập lệnh phía máy chủ jQuery và Ajax để 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ó
Xem bản trình diễn
Trước tiên, chúng tôi phải bao gồm liên kết thư viện Bootstrap Stylesheet và SheetJS ở tiêu đề của trang HTML của chúng tôi
Sau đó, trong trang HTML này, chúng ta phải tạo một thẻ tệp cho tệp excel được chọn từ máy tính cục bộ.
Và bên dưới tệp này, chúng ta phải tạo một thẻ 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 tiếp tục viết mã JavaScript, vì vậy trước tiên hãy lưu trữ thuộc tính 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 trong 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] => {
}];
Trong 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 file được chọn không phải là file excel thì trang web sẽ hiển thị lỗi, còn nếu file chọn là excel thì sẽ tiếp tục hiển thị dữ liệu file 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, giờ hãy đọc tệp bằng đối tượng FileReader. Tệp ở đây phải được đọc quảng cáo ArrayBuffer bằng cách chuyển đối tượng tệp bằng sự kiện. Mục tiêu. tệp [0].
var reader = new FileReader[];
reader.readAsArrayBuffer[event.target.files[0]];
NẾU tệp đã chọn là tệp excel phù hợp thì chúng ta cần chuyển đổi những gì chúng ta nhận được từ đối tượng FileReader sang đối tượng Unit8Array bằng cách chuyển kết quả Filereader vào hàm tạo Unit8Array.
var data = new Uint8Array[reader.result];
Tiếp theo, chúng ta chuyển dữ liệu Unit8Array này vào hàm read[] của SheetJS và nó sẽ trả về đối tượng sổ làm việc excel đã chọn.
Sau khi lấy đối tượng workbook, tiếp theo ta lấy tên sheet của file excel đã chọn. Vì vậy, ở đây biến SheetNames sẽ trả về tên trang tính ở định dạng mảng.
Sau khi chúng tôi có được tên trang tính, bây giờ chúng tôi muốn lấy dữ liệu trang tính đầu tiên ở định dạng JSON, vì vậy chúng tôi có thể lấy dữ liệu này bằng hàm sheet_to_json[] của SheetJS bằng cách chuyển trang tính đầu tiên của sổ làm việc .
Sau khi chúng ta có dữ liệu trang tính đầu tiên ở định dạng JSON, tiếp theo, chúng ta chỉ cần viết mã JavaScript và chuyển đổi dữ liệu JSON đó sang định dạng HTML và hiển thị dưới thẻ chia với id excel_data. Vì vậy, nó sẽ hiển thị dữ liệu tệp excel trên trang web ở dạng bảng HTML.
Vì vậy, khi bạn đã làm theo tất cả các bước trên thì bạn có thể kiểm tra kết quả trong trình duyệt. Vì vậy, khi chúng tôi đã chọn tệp excel, nó sẽ hiển thị dữ liệu trang tính 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 ta đã 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 SheetJS JavaScript ở phía máy khách. Dưới đây bạn có thể tìm thấy mã nguồn hoàn chỉnh.