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 bằng Show Hướng dẫn này giúp đọc tệp CSV bằng thư viện phân tích cú pháp HTML5 và Papa. Papa Parse là trình phân tích cú pháp CSV trong trình duyệt nhanh nhất dành 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 Video hướng dẫnNếu bạn thấy 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ó thể sử dụng mã javascript lõi để đọc tệp CSV bằng exp thông thường nhưng sử dụng plugin papaparse, bạn sẽ có nhiều tùy chọn nâng cao hơn để phân tích cú pháp 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), giúp chọn tệp từ DOM dễ dàng hơn. Trình phân tích cú pháp Papa hỗ trợ tất cả các trình duyệt hiện đại ngoại trừ Các tính năng của Papa Parse?
Tôi sẽ chỉ cho bạn cách đọc dữ liệu tệp CSV từ tệp CSV đã 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 được 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 ParseBước 2. Tạo đánh dấu biểu mẫu HTML để tải tệp lên, Hãy thêm đoạn mã dưới đây vào tệp <form class="form-inline"> <div class="form-group"><label for="files">Upload a CSV formatted file:</label> <input id="files" class="form-control" accept=".csv" required="" type="file"></div> <div class="form-group"><button id="submit-file" class="btn btn-primary" type="submit">Upload File</button></div> </form>1 <form class="form-inline"> <div class="form-group"><label for="files">Upload a CSV formatted file:</label> <input id="files" class="form-control" accept=".csv" required="" type="file"></div> <div class="form-group"><button id="submit-file" class="btn btn-primary" type="submit">Upload File</button></div> </form> 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. Như bạn có thể thấy trường nhập tệp tải lên là trường bắt buộc và cho phép chọn tệp có định dạng CSV quảng cáoBước 3. Khởi tạo phân tích cú pháp Papa để phân tích tệp csv và đặt tham số cấu hình. Bạn cần thêm đoạn mã dưới đây vào cuối tệp $('#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");
}
});Đoạn mã JavaScript ở trên sẽ được thực thi khi nhấp vào nút gửi tệp. 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ư dấu phân cách, hàm hoàn thà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 phân tích cú pháp papa, cuối cùng gọi hàm gọi lại gử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 ta sẽ định nghĩa hàm <form class="form-inline"> <div class="form-group"><label for="files">Upload a CSV formatted file:</label> <input id="files" class="form-control" accept=".csv" required="" type="file"></div> <div class="form-group"><button id="submit-file" class="btn btn-primary" type="submit">Upload File</button></div> </form>0 để hiển thị dữ liệu CSV vào bảng function displayHTMLTable(results){
var table = "<table class='table'>";
var data = results.data;
for(i=0;i<data.length;i++){
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</th>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}trong đoạn mã trên, tôi đang lặp lại dữ liệu tệp CSV và tự động tạo các hàng trong bảng HTML bằng dữ liệu CSV. Dòng 18 giúp đặt dữ liệu chuỗi HTML thành bộ chứa div nơi Chúng tôi sẽ hiển thị dữ liệu csv vào danh sách Cách phân tích các giá trị số nguyên đơn bằng dấu phẩy được phân táchMột trong những người dùng của chúng tôi (Karen M. Green) gửi cho tôi bản sửa lỗi nhỏ để phân tích cú pháp dữ liệu chuỗi đơn được phân tách bằng dấu phẩy. <form class="form-inline"> <div class="form-group"><label for="files">Upload a CSV formatted file:</label> <input id="files" class="form-control" accept=".csv" required="" type="file"></div> <div class="form-group"><button id="submit-file" class="btn btn-primary" type="submit">Upload File</button></div> </form>1 Tệp đầu vào có các giá trị ô có phạm vi số bao gồm dấu phẩy Ví dụ trên sẽ phân chia không chính xác “5,7-9” thành 5,”7-9” (hai ô) thay vì giữ nó dưới dạng một giá trị ô Điều này có thể dễ dàng khắc phục bằng thay đổi nhỏ sau trong Bước 3, Cần thay đổi đối tượng cấu hình để thêm tệp phân tích cú pháp. <form class="form-inline"> <div class="form-group"><label for="files">Upload a CSV formatted file:</label> <input id="files" class="form-control" accept=".csv" required="" type="file"></div> <div class="form-group"><button id="submit-file" class="btn btn-primary" type="submit">Upload File</button></div> </form>2 $('#files').parse({
config: {
delimiter: "",
header: false,
complete: displayHTMLTable
},Theo tài liệu Papa Parse, chỉ khi tiêu đề sai mới có kết quả. Dữ liệu sẽ có cấu trúc dữ liệu mong muốn. một mảng của các mảng - nếu không, bạn sẽ nhận được cấu trúc không mong muốn khác |
