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- <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSV to HTML Table | Javacodepoint</title>
</head>
<body>
<h2>Upload a CSV file to display in HTML Table</h2>
<!-- Input element to upload an csv file -->
<input type="file" id="file_upload" />
<button onclick="upload()">Upload</button>
<br>
<br>
<!-- table to display the csv data -->
<table id="display_csv_data" border="1"></table>
<script>
// Method to upload a valid csv 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 == '.CSV') {
//Here calling another method to read CSV file into json
csvFileToJSON(files[0]);
}else{
alert("Please select a valid csv file.");
}
}
//Method to read csv file and convert it into JSON
function csvFileToJSON(file){
try {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e) {
var jsonData = [];
var headers = [];
var rows = e.target.result.split("\r\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
var rowData = {};
for(var j=0;j<cells.length;j++){
if(i==0){
var headerName = cells[j].trim();
headers.push(headerName);
}else{
var key = headers[j];
if(key){
rowData[key] = cells[j].trim();
}
}
}
if(i!=0){
jsonData.push(rowData);
}
}
//displaying the json result into HTML table
displayJsonToHtmlTable(jsonData);
}
}catch(e){
console.error(e);
}
}
//Method to display the data in HTML Table
function displayJsonToHtmlTable(jsonData){
var table=document.getElementById("display_csv_data");
if(jsonData.length>0){
var headers = Object.keys(jsonData[0]);
var htmlHeader='<thead><tr>';
for(var i=0;i<headers.length;i++){
htmlHeader+= '<th>'+headers[i]+'</th>';
}
htmlHeader+= '<tr></thead>';
var htmlBody = '<tbody>';
for(var i=0;i<jsonData.length;i++){
var row=jsonData[i];
htmlBody+='<tr>';
for(var j=0;j<headers.length;j++){
var key = headers[j];
htmlBody+='<td>'+row[key]+'</td>';
}
htmlBody+='</tr>';
}
htmlBody+='</tbody>';
table.innerHTML=htmlHeader+htmlBody;
}else{
table.innerHTML='There is no data in CSV';
}
}
</script>
</body>
</html>
ĐẦ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:<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 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 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSV to Bootstrap Table | Javacodepoint</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h3>Upload a CSV file to display in Bootstrap Table</h3>
<!-- Input element to upload an csv file -->
<input type="file" id="file_upload" />
<button onclick="upload()" class="btn btn-primary">Upload</button>
<br>
<br>
<!-- table to display the csv data -->
<table class="table table-bordered table-striped" id="display_csv_data"></table>
</div>
<script>
// Method to upload a valid csv 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 == '.CSV') {
//Here calling another method to read CSV file into json
csvFileToJSON(files[0]);
}else{
alert("Please select a valid csv file.");
}
}
//Method to read csv file and convert it into JSON
function csvFileToJSON(file){
try {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e) {
var jsonData = [];
var headers = [];
var rows = e.target.result.split("\r\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
var rowData = {};
for(var j=0;j<cells.length;j++){
if(i==0){
var headerName = cells[j].trim();
headers.push(headerName);
}else{
var key = headers[j];
if(key){
rowData[key] = cells[j].trim();
}
}
}
if(i!=0){
jsonData.push(rowData);
}
}
//displaying the json result into table
displayJsonToTable(jsonData);
}
}catch(e){
console.error(e);
}
}
//Method to display the data in Table
function displayJsonToTable(jsonData){
var table=document.getElementById("display_csv_data");
if(jsonData.length>0){
var headers = Object.keys(jsonData[0]);
var htmlHeader='<thead><tr>';
for(var i=0;i<headers.length;i++){
htmlHeader+= '<th>'+headers[i]+'</th>';
}
htmlHeader+= '<tr></thead>';
var htmlBody = '<tbody>';
for(var i=0;i<jsonData.length;i++){
var row=jsonData[i];
htmlBody+='<tr>';
for(var j=0;j<headers.length;j++){
var key = headers[j];
htmlBody+='<td>'+row[key]+'</td>';
}
htmlBody+='</tr>';
}
htmlBody+='</tbody>';
table.innerHTML=htmlHeader+htmlBody;
}else{
table.innerHTML='There is no data in CSV';
}
}
</script>
</body>
</html>
ĐẦU RA Phần 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 |
