Chào mừng bạn đến với hướng dẫn về cách đọc tệp CSV và hiển thị tệp đó trong bảng HTML bằng Javascript. Bạn đã đọc đúng. Javascript hiện đại thực sự có khả năng đọc các tệp CSV và xuất trực tiếp chúng. Không yêu cầu phía máy chủ. Đọc về các ví dụ
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TLDR – TRANG TRÌNH BÀY NHANH
Chế độ toàn màn hình - Bấm vào đây
MỤC LỤC
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
ẢNH CHỤP MÀN HÌNH
Được rồi, bây giờ chúng ta hãy xem các ví dụ về cách đọc tệp CSV và hiển thị tệp đó trong bảng HTML bằng Javascript
TỆP CSV GIẢ
0-hình nộm. csv
Jo Doe,jo@doe.com,465785
Joa Doe,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Jog Doe,jog@doe.com,578456
Joh Doe,joh@doe.com,378945
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
Jor Doe,jor@doe.com,754642
Joy Doe,joy@doe.com,124578
Hãy để chúng tôi bắt đầu với tệp CSV giả, danh sách người dùng giả. Dành cho những người chưa quen với “các giá trị được phân tách bằng dấu phẩy”
- Tệp CSV chỉ là văn bản thuần túy
- Chúng tôi sử dụng ngắt dòng
\r\n
để biểu thị các hàng - Chúng tôi sử dụng dấu phẩy
,
để chỉ cột - Nếu ô chứa dấu phẩy, giá trị sẽ được đặt trong dấu ngoặc kép. e. g.
"Joy, Doe"
VÍ DỤ 1] BỘ CHỌN TỆP CSV VÀO BẢNG HTML
1A] HTML
1a-read-csv. html
- Để làm cho mọi thứ dễ dàng, chúng tôi sẽ tải một tệp csv nhẹ. thư viện js để xử lý CSV
Trình chọn tệp, chỉ giới hạn ở tệp CSV
0 Bảng trống để hiển thị nội dung CSV
1B] JAVASCRIPT
1b-read-csv. js
// [A] FILE READER + HTML ELEMENTS
let reader = new FileReader[],
picker = document.getElementById["demoPick"],
table = document.getElementById["demoTable"];
// [B] READ CSV ON FILE PICK
picker.onchange = [] => reader.readAsText[picker.files[0]];
// [C] READ CSV & GENERATE TABLE
reader.onloadend = [] => {
table.innerHTML = "";
for [let row of CSV.parse[reader.result]] {
let tr = table.insertRow[];
for [let col of row] {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
};
Vâng, đó là tất cả. Điều này sẽ khá đơn giản
1 Chúng tôi sẽ sử dụng đối tượng trình đọc tệp này để đọc tệp CSV đã chọn
2 Khi người dùng chọn một tệp CSV, chúng tôi sẽ đọc nó dưới dạng văn bản thuần túy- Khi
3 đã tải đầy đủ tệp CSV đã chọn
4 Lặp lại các hàng của tệp CSV được phân tích cú pháp và chèn các hàng của bảng
5 Lặp qua các cột của mỗi hàng và thêm các ô của bảng
VÍ DỤ 2] AJAX ĐỌC TỆP CSV
2A] HTML
2a-ajax-csv. html
Đối với ví dụ này, chúng ta chỉ cần một bảng trống
2B] BẢN JAVASCRIPT
2b-ajax-csv. js
// [A] GET HTML TABLE
let table = document.getElementById["demoTable"];
// [B] AJAX FETCH CSV FILE
fetch["0-dummy.csv"]
.then[res => res.text[]]
.then[csv => {
table.innerHTML = "";
for [let row of CSV.parse[csv]] {
let tr = table.insertRow[];
for [let col of row] {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
}];
Không cần tìm đâu xa, điều này khá giống nhau
6 Lấy tệp CSV trên máy chủ
7 Đọc CSV dưới dạng văn bản thuần túy
8 Khá giống như trên. Lặp qua các hàng/cột và tạo bảng HTML
BIT BỔ SUNG & LIÊN KẾT
Đó là tất cả cho dự án này và đây là một phần nhỏ về một số tính năng bổ sung có thể hữu ích cho bạn
LƯU Ý VỀ HIỆU SUẤT
Như bạn có thể thấy, chúng tôi đang đọc toàn bộ tệp CSV thành một chuỗi. Điều này hoạt động, nhưng bạn sẽ gặp phải các sự cố về hiệu suất và sự cố "hết bộ nhớ" với các tệp CSV lớn. Tại thời điểm viết bài, không có cách nào để đọc từng dòng tệp CSV… Ít nhất là trong Javascript phía máy khách. Vì vậy, chỉ cần nhận thức được điều này, và làm việc với nó một cách cẩn thận
P. S. Nếu bạn đang sử dụng công cụ chọn tệp, bạn có thể lấy kích thước tệp đã chọn với
9
HÀNG ĐẦU TIÊN LÀ TIÊU ĐỀ
let first = true;
for [let row of CSV.parse[csv]] {
let tr = table.insertRow[];
for [let col of row] {
if [first] {
let th = document.createElement["th"];
th.innerHTML = col;
tr.appendChild[th];
} else {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
first = false;
}
Giới thiệu cờ
// [A] FILE READER + HTML ELEMENTS
let reader = new FileReader[],
picker = document.getElementById["demoPick"],
table = document.getElementById["demoTable"];
// [B] READ CSV ON FILE PICK
picker.onchange = [] => reader.readAsText[picker.files[0]];
// [C] READ CSV & GENERATE TABLE
reader.onloadend = [] => {
table.innerHTML = "";
for [let row of CSV.parse[reader.result]] {
let tr = table.insertRow[];
for [let col of row] {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
};
0 – Nối thêm // [A] FILE READER + HTML ELEMENTS
let reader = new FileReader[],
picker = document.getElementById["demoPick"],
table = document.getElementById["demoTable"];
// [B] READ CSV ON FILE PICK
picker.onchange = [] => reader.readAsText[picker.files[0]];
// [C] READ CSV & GENERATE TABLE
reader.onloadend = [] => {
table.innerHTML = "";
for [let row of CSV.parse[reader.result]] {
let tr = table.insertRow[];
for [let col of row] {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
};
1 thay vì chỉ // [A] FILE READER + HTML ELEMENTS
let reader = new FileReader[],
picker = document.getElementById["demoPick"],
table = document.getElementById["demoTable"];
// [B] READ CSV ON FILE PICK
picker.onchange = [] => reader.readAsText[picker.files[0]];
// [C] READ CSV & GENERATE TABLE
reader.onloadend = [] => {
table.innerHTML = "";
for [let row of CSV.parse[reader.result]] {
let tr = table.insertRow[];
for [let col of row] {
let td = tr.insertCell[];
td.innerHTML = col;
}
}
};
2 cho hàng đầu tiên
KIỂM TRA TÍNH TƯƠNG THÍCH
- Chức năng mũi tên – CanIUse
- API trình đọc tệp – CanIUse
- Tìm nạp – CanIUse
Những ví dụ này sẽ hoạt động tốt trong hầu hết các trình duyệt hiện đại
LIÊN KẾT và THAM KHẢO
- csv. js – GitHub
- Hiển thị CSV dưới dạng bảng HTML trong PHP – Code Boxx
- Javascript Xuất mảng sang tệp CSV – Code Boxx
- Javascript Read and Parse File CSV [Into Array Object] – Code Boxx
HƯỚNG DẪN YOUTUBE
BẢNG CHEAT INFOGRAPHICS
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc