HTML có thể đọc CSV không?

CSV (giá trị được phân tách bằng dấu phẩy) lưu trữ dữ liệu dạng bảng (số và văn bản) ở dạng văn bản thuần túy. Văn bản thuần túy có nghĩa là tệp là một chuỗi ký tự, không có dữ liệu nào phải được diễn giải thay vào đó, dưới dạng số nhị phân. Tệp CSV bao gồm bất kỳ số lượng bản ghi nào, được phân tách bằng một số loại ngắt dòng; . Thông thường, tất cả các bản ghi có một chuỗi các trường giống hệt nhau

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

Mục lục

Tổng quan

CSV 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
101,Rahul Singh,25,[email được bảo vệ],20-08-2014
102,Neeraj Kumar,30,[email được bảo vệ],05-01-2012
103,Raj Kumar Yadav,27,[email được bảo vệ],15-12-2017

Hiển thị tệp CSV trong bảng HTML bằng Javascript

Hiể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-



  
      
	CSV to HTML Table | Javacodepoint
  
  
  	

Upload a CSV file to display in HTML Table



ĐẦU RA

HTML có thể đọc CSV không?

Hiển thị tệp CSV trong bảng Bootstrap bằng Javascript

Now 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



  
      
	CSV to Bootstrap Table | Javacodepoint
	[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	
  
  
  

Upload a CSV file to display in Bootstrap Table



ĐẦU RA

HTML có thể đọc CSV không?

Phần kết luận

Trong 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 để hiển thị dữ liệu CSV trong bảng HTML?

Hiển thị bất kỳ tệp CSV nào dưới dạng bảng HTML đẹp, có thể lọc và tìm kiếm được. .
Sao chép kho lưu trữ này (trong dòng lệnh) git clone git@github. com. derekeder/csv-to-html-table. git cd csv-to-html-bảng
Thêm tệp CSV của bạn vào dữ liệu/thư mục
trong chỉ mục. html đặt các tùy chọn của bạn trong CsvToHtmlTable. hàm init()

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

JavaScript có thể đọc tệp CSV không?

Tệp CSV sử dụng JavaScript. Để chuyển đổi hoặc phân tích cú pháp dữ liệu CSV thành một mảng, chúng ta cần lớp FileReader của JavaScript, lớp này chứa phương thức có tên readAsText() sẽ đọc nội dung tệp CSV và phân tích kết quả dưới dạng văn bản chuỗi. Nếu chúng ta có chuỗi, chúng ta có thể tạo một hàm tùy chỉnh để biến chuỗi thành một mảng

Làm cách nào để hiển thị tệp CSV trong HTML bằng Python?

Các bước chuyển đổi CSV sang HTML qua Python .
Tải tệp CSV với phiên bản Sổ làm việc
Gọi sổ làm việc. phương thức lưu
Truyền đường dẫn đầu ra với phần mở rộng HTML làm tham số
Kiểm tra đường dẫn được chỉ định cho tệp HTML kết quả