Hiển thị tệp CSV trong bảng HTML
|
Bài viết này hướng dẫn bạn cách tải tệp CSV lên và hiển thị dữ liệu CSV trong bảng HTML. Bạn cũng sẽ thấy dữ liệu tệp CSV được hiển thị trong bảng Bootstrap Show
Mục lục Tổng quanCSV là tệp giá trị được phân tách bằng dấu phẩy, cho phép lưu dữ liệu ở định dạng bảng. Nó là một tệp văn bản thuần túy chứa danh sách dữ liệu. Các tệp này thường được sử dụng để trao đổi dữ liệu giữa các ứng dụng khác nhau Đôi khi, chúng tôi được yêu cầu hiển thị dữ liệu tệp CSV ở định dạng bảng HTML. Vì vậy, ở đây chúng ta sẽ học cách hiển thị dữ liệu tệp CSV trong bảng HTML đơn giản và trong bảng Bootstrap bằng Javascript. Chúng ta sẽ sử dụng phương thức readAsBinaryString() của lớp FileReader để đọc tệp CSV. Bây giờ, giả sử chúng ta có một tệp CSV (Nhân viên. csv) như bên dưới Nhân viên. csv Id nhân viên, tên nhân viên, tuổi, id email, ngày tham gia Hiển thị tệp CSV trong bảng HTML bằng JavascriptHiển thị dữ liệu tệp CSV vào bảng HTML rất đơn giản. Đầu tiên, chúng tôi đọc dữ liệu CSV bằng phương thức readAsBinaryString() của lớp FileReader và chuyển đổi chúng thành định dạng JSON. Sau đó, lặp lại dữ liệu JSON đã chuyển đổi và hiển thị chúng vào Bảng HTML. Xem mã hoàn chỉnh cho nó bên dưới-
ĐẦU RA Hiển thị tệp CSV trong bảng Bootstrap bằng JavascriptNow here, we are going to display the CSV file data into a Bootstrap table. To use bootstrap, we have to include its library in the HTML document. So include the below library inside tag of your HTML document:[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> Trong ví dụ này, chúng tôi sử dụng cùng một mã như trên, chỉ chúng tôi sử dụng. bàn,. viền bảng,. table-striped (lớp bảng bootstrap) để chuyển đổi bảng HTML đơn giản thành bảng Bootstrap. Xem mã hoàn chỉnh bên dưới
ĐẦU RA Sự kết luậnTrong bài viết này, bạn đã học cách hiển thị/hiện dữ liệu tệp CSV thành bảng HTML và bảng Bootstrap bằng Javascript Làm cách nào để chuyển đổi tệp CSV thành bảng HTML?Bước 1. Chọn đầu vào của bạn. Nhập dữ liệu Bước 2. Chọn tùy chọn đầu vào (tùy chọn) Tùy chọn đầu vào Hàng đầu tiên là tên cột. . Bước 3. Chọn tùy chọn đầu ra (tùy chọn) Tùy chọn đầu ra. . Bước 4. Tạo đầu ra tùy chỉnh qua Mẫu (tùy chọn) Sửa đổi Mẫu bên dưới và nhấn Chuyển đổi Xem thêm Mẫu CSV. . Bước 5. Tạo đầu ra Làm cách nào để chuyển đổi tệp CSV sang bảng HTML trong JavaScript?Javascript để phân tích tệp CSV và chuyển đổi nó thành bảng HTML . Bước 1. Lấy dữ liệu từ tệp CSV. Để lấy dữ liệu từ file CSV, chúng ta có thể sử dụng XMLHttpRequest() hoặc fetch(). . Bước 2. Phân tích cú pháp dữ liệu và đặt chúng vào một bảng HTML Làm cách nào để hiển thị tệp CSV trong HTML bằng Python?Phương thức read_csv() lấy tên tệp của tệp csv làm đối số đầu vào và trả về một khung dữ liệu chứa dữ liệu từ tệp csv. Sau khi lấy dữ liệu từ tệp csv vào khung dữ liệu, chúng ta có thể chuyển đổi khung dữ liệu thành chuỗi HTML bằng phương thức to_html() .
Làm cách nào để tải lên tệp CSV bằng HTML?Biểu mẫu nhập liệu này có chức năng tương đương với biểu mẫu được sử dụng trong Tải tệp lên. Tệp bạn chọn tải lên phải là tệp CSV có định dạng.
. Mẫu đầu vào HTML |
