Quá trình ba bước
Bạn cần ba bước:
1] Sử dụng AJAX để tìm nạp dữ liệu từ máy chủ của bạn và biến nó thành một mảng. Bạn có thể làm điều này ví dụ. với jQuery sau: Use Ajax to fetch data from your server and turn it into an array. You could do this eg. with the following jQuery :
$.ajax[{
type: "GET",
url: "data.csv",
success: CSVToHTMLTable
}];
2] Khi bạn đã nhận được tệp CSV của mình, bạn cần phải phân tích nó. Một cách dễ dàng và đáng tin cậy để làm điều đó, sẽ là sử dụng một thư viện như Papa Parse: Once you have get your CSV file, you need to parse it. An easy & reliable way to do it, would be to use a library like Papa Parse :
var data = Papa.parse[data].data;
3] Bạn cần xác định một hàm để biến đổi mảng của bạn thành bảng HTML. Đây là cách bạn có thể làm điều này với jQuery: You need to define a function to transform your array into an HTML table. Here's how you could do this with jQuery :
function arrayToTable[tableData] {
var table = $['
'];
$[tableData].each[function [i, rowData] {
var row = $[''+cellData+' ']];
}];
table.append[row];
}];
return table;
}
Đặt mọi thứ lại với nhau
Đây là cách bạn có thể đặt mọi thứ lại với nhau:
function arrayToTable[tableData] {
var table = $['
'];
$[tableData].each[function [i, rowData] {
var row = $[''+cellData+' ']];
}];
table.append[row];
}];
return table;
}
$.ajax[{
type: "GET",
url: "//localhost/test/data.csv",
success: function [data] {
$['body'].append[arrayToTable[Papa.parse[data].data]];
}
}];
CSV là viết tắt của các giá trị được phân tách bằng dấu phẩy là định dạng tệp phổ biến nhất để trao đổi thông tin hoặc dữ liệu giữa các ngôn ngữ lập trình chéo. Bạn cũng có thể sử dụng CSV để lưu trữ thông tin trong bảng tính hoặc cơ sở dữ liệu. HTML5 cung cấp API Filereader để đọc tệp CSV bằng JavaScript. Bạn có thể đọc tệp CSV từ một vị trí cục bộ hoặc từ xa. Các tệp cục bộ được mở bằng API Filereader và các tệp từ xa được tải xuống với XMLHttpRequest. stands for comma-separated-values is the most popular file format to exchange information or data between cross-programming languages. You can also use CSV to store information in spreadsheet or database. HTML5 provide FileReader API to read CSV file using JavaScript. You can read CSV file from a local or remote location. The Local files are opened with FileReader API, and remote files are downloaded with XMLHttpRequest.
Hướng dẫn này giúp đọc tệp CSV bằng thư viện HTML5 và PAPA Parse. Papa Parse là trình phân tích cú pháp CSV trong trình duyệt nhanh nhất cho JavaScript. Nó đáng tin cậy và chính xác theo RFC 4180. Bạn cũng có thể sử dụng jQuery để đọc dữ liệu CSV vào bảng HTML.Papa Parse is the fastest in-browser CSV parser for JavaScript. It is reliable and correct according to RFC 4180. You can also use jQuery to read csv data into HTML table.
Video hướng dẫn
Nếu bạn thoải mái hơn khi xem video giải thích cách đọc tệp CSV bằng JavaScript, thì bạn nên xem video hướng dẫn này.
Bạn cũng có thể kiểm tra hướng dẫn được đề xuất khác của CSV,
- Đọc tệp CSV bằng JavaScript và HTML5
- Đọc tệp CSV bằng cách sử dụng jQuery và hiển thị vào bảng HTML
- Xuất dữ liệu sang CSV
- DataTables Xuất sang Excel bằng HTML5
- Các plugin trình xem pdf phổ biến của JavaScript và jQuery
Bạn có thể sử dụng mã JavaScript Core để đọc tệp CSV bằng cách sử dụng EXP thông thường nhưng sử dụng plugin Papaparse, bạn có các tùy chọn nâng cao hơn để phân tích tệp CSV. Bạn cũng có thể sử dụng thư viện này với jQuery [không bắt buộc], điều đó giúp dễ dàng chọn các tệp từ DOM. Papa Parser hỗ trợ tất cả các trình duyệt hiện đại ngoại trừ
var data = Papa.parse[data].data;
Các tính năng của papa parse?
- Dễ dàng sử dụng và trình phân tích cú pháp CSV nhanh nhất
- Các tệp CSV phân tích trực tiếp [cục bộ hoặc qua mạng]
- Truyền phát các tệp lớn [thậm chí qua HTTP]
- Phân tích ngược [chuyển đổi JSON thành CSV]
- Deto-Detect Detect Delimiter
- Chủ đề công nhân để giữ cho trang web của bạn phản ứng
- Hỗ trợ hàng tiêu đề
- Tạm dừng, sơ yếu lý lịch, hủy bỏ
- Có thể chuyển đổi số và boolean thành loại của chúng
- Tích hợp jQuery tùy chọn để nhận các tệp từ các yếu tố
1var data = Papa.parse[data].data;
Tôi sẽ chỉ cho bạn, cách đọc dữ liệu tệp CSV từ tệp CSV được tải lên. Tôi sẽ hiển thị dữ liệu CSV đó vào bảng HTML. Bạn có thể sử dụng dữ liệu phân tích cú pháp này để xử lý thêm như gửi đến máy chủ hoặc lưu trữ trong bộ nhớ cục bộ HTML5.
Đọc tệp CSV bằng Papa Parse
Bước 1: Bao gồm các tệp papa parse và jQuery vào phần đầu của tệp
2. Included papa parse and jQuery files into head section of var data = Papa.parse[data].data;
var data = Papa.parse[data].data;
Bước 2: Tạo đánh dấu biểu mẫu HTML Để tải lên tệp, hãy để thêm mã bên dưới vào tệp
2. Create a HTML form markup to upload a file, Let’s add the below code into the var data = Papa.parse[data].data;
var data = Papa.parse[data].data;
Upload a CSV formatted file:Upload File
Tôi đã sử dụng đầu vào tệp HTML5 với các thuộc tính như xác thực, v.v., vì bạn có thể thấy trường đầu vào tải lên tệp là một trường bắt buộc và cho phép chọn tệp được định dạng CSV.
Bước 3: Khởi tạo papa parse vào tệp CSV phân tích và đặt tham số cấu hình. Bạn cần thêm mã dưới đây ở dưới cùng của tệp. Initialize Papa parse to parse csv file and set config parameters. You need to add the below code at the bottom of the file.
$['#files'].parse[{
config: {
delimiter: "auto",
complete: displayHTMLTable,
},
before: function[file, inputElem]
{
//console.log["Parsing file...", file];
},
error: function[err, file]
{
//console.log["ERROR:", err, file];
},
complete: function[]
{
//console.log["Done with all files"];
}
}];Mã JavaScript ở trên sẽ được thực thi khi nhấp vào nút Tệp gửi. Tôi đang định cấu hình một số tham số bằng cách sử dụng các đối tượng cấu hình, chẳng hạn như Delimiter, Chức năng hoàn chỉnh gọi lại và trình xử lý. Chúng tôi đang tải lên tệp CSV và gửi dữ liệu đến phiên bản Papa Parse, cuối cùng gọi chức năng gọi lại để thực hiện thao tác phân tích cú pháp để hiển thị dữ liệu CSV vào bảng HTML.
Bước 4: Bây giờ chúng tôi sẽ xác định hàm
4 để hiển thị dữ liệu CSV vào bảng. Now we will define var data = Papa.parse[data].data;
var data = Papa.parse[data].data;
function displayHTMLTable[results]{
var table = "