Trong hướng dẫn trước, chúng ta đã nói về SheetJS và cách chuyển đổi bảng html thành tệp excel. Đối với hướng dẫn này, chúng ta sẽ làm ngược lại. Tôi sẽ chỉ cho bạn cách chuyển đổi tệp excel mà người dùng đã tải lên trở lại bảng html và hiển thị nó trên trang web bằng SheetJS. Như mọi khi - Không có tập lệnh phía máy chủ hoặc AJAX liên quan. Hãy đi kiểm tra nó

Đây là trang mẫu của chúng tôi, với thẻ đầu vào để người dùng tải tệp excel lên

Trước tiên, hãy đọc tệp bằng FileReader trong trình xử lý sự kiện thay đổi. Chúng tôi sẽ đọc nó dưới dạng ArrayBuffer và 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[e.target.files[0]];

Tuy nhiên, vì loại nội dung của excel nằm trong luồng octet nên chúng tôi cần chuyển đổi những gì chúng tôi đã nhận được từ FileReader sang UInt8Array. Chúng ta có thể làm điều đó bằng cách chuyển kết quả FileReader vào hàm tạo UInt8Array

var data = new Uint8Array[reader.result];

Sau đó, chuyển mảng vào hàm read[] của SheetJS và cho nó biết chúng tôi đang gửi mảng mà chúng tôi sẽ nhận lại đối tượng sổ làm việc

var wb = XLSX.read[data,{type:'array'}];

Bây giờ chúng tôi đã nhập tệp excel dưới dạng đối tượng sổ làm việc SheetJS. Tiếp theo chúng ta sẽ sử dụng hàm write[] để chuyển nó thành chuỗi html. bạn sẽ cần chuyển tên trang tính và đặt loại đầu ra là nhị phân và bookType là html

var htmlstr = XLSX.write[wb,{sheet:"sheet no1", type:'binary',bookType:'html'}];

và cuối cùng, chúng tôi nối chuỗi html đó vào bất cứ nơi nào bạn muốn hiển thị bảng

$['#wrapper'][0].innerHTML += htmlstr;

Bây giờ, chúng tôi đã sẵn sàng. Đây là tập tin excel thử nghiệm của chúng tôi

Khi tôi chọn tệp excel bằng nút duyệt, tệp excel ngay lập tức được chuyển thành bảng HTML và hiển thị trên trang web

À chính nó đấy. Hy vọng các bạn yêu thích hướng dẫn. Bạn có thể tìm thấy mã nguồn đầy đủ bên dưới. Đừng quên đăng ký Kênh Youtube của chúng tôi để biết thêm thư viện javascript thú vị và các hướng dẫn khác

Mã nguồn đầy đủ

Red Stapler - SheetJS 

        
        



        $['#input-excel'].change[function[e]{
                var reader = new FileReader[];
                reader.readAsArrayBuffer[e.target.files[0]];

                reader.onload = function[e] {
                        var data = new Uint8Array[reader.result];
                        var wb = XLSX.read[data,{type:'array'}];

                        var htmlstr = XLSX.write[wb,{sheet:"sheet no1", type:'binary',bookType:'html'}];
                        $['#wrapper'][0].innerHTML += htmlstr;
                }
        }];

Được viết bởi

TK Kỹ sư, Nhà phát triển web, Nhà phát triển phần mềm quỹ tương hỗ cũ. Anh thành lập Red Stapler vào năm 2015 để chia sẻ những tài nguyên hữu ích cho những ai quan tâm đến thiết kế web, phát triển web và lập trình. Đăng ký Kênh YouTube hoặc Trang Facebook của anh ấy để biết các mẹo và hướng dẫn hàng tuần.

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
  • Làm cách nào để sử dụng SheetJS?
• Làm cách nào để hiển thị dữ liệu Excel trong Bảng HTML bằng Javascript?
  • 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 bằng Javascript
  • 5. Chuyển đổi dữ liệu JSON sang Bảng HTML bằng Javascript
• Hiển thị dữ liệu Excel trong Bảng HTML [ví dụ mã hoàn chỉnh]
• Thử nghiệm và Demo trực tiếp
• Sự kết luận

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

Thư viện. xlsx. tối thiểu. liên kết jsCDN. https. //cdnjs. đám mây. com/ajax/libs/xlsx/0. 17. 5/xlsx. tối thiểu. js

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

var wb = XLSX.read[data,{type:'array'}];

1

var wb = XLSX.read[data,{type:'array'}];

2

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 

var wb = XLSX.read[data,{type:'array'}];

3 tag with type=”file” to choose an excel file. And a 

var wb = XLSX.read[data,{type:'array'}];

4 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 thức javascript

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

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

var data = new Uint8Array[reader.result];

2

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 thức 

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

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

var data = new Uint8Array[reader.result];

7

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ã

var data = new Uint8Array[reader.result];

9

Hiển thị dữ liệu Excel trong Bảng HTML [ví dụ mã hoàn chỉnh]

Hãy xem đoạn mã hoàn chỉnh bên dưới [đặt tất cả đoạn mã trên vào một tệp HTML]

var wb = XLSX.read[data,{type:'array'}];

0

Thử nghiệm và Demo trực tiếp

Giả sử một tệp Excel mẫu [sinh viên. xlsx] mà chúng tôi sẽ tải lên. Như bạn có thể thấy trong hình bên dưới, tệp excel này chứa dữ liệu của học sinh [tên, địa chỉ, id email, tuổi]

Hãy xem kết quả sau khi chúng tôi tải tệp excel ở trên lên ứng dụng này

Bản thử trực tiếp

Sự kết luận

Trong hướng dẫn này, bạn đã thấy cách bạn hiển thị dữ liệu tệp Excel trong Bảng HTML bằng Javascript. Bạn đã thấy ở đây, điều đó có thể dễ dàng thực hiện bằng cách sử dụng thư viện SheetJS. Như bạn đã thấy thư viện này có khả năng chuyển đổi chuỗi nhị phân sang định dạng JSON được sử dụng ở đây để hiển thị trong bảng HTML

Làm cách nào để tìm nạp dữ liệu từ Excel sang HTML bằng JavaScript?

Làm cách nào để đọc dữ liệu từ Excel bằng jQuery?