Tôi có một trang HTML độc lập [không có máy chủ web] và tôi đang theo một số mã JavaScript sẽ hiển thị nội dung của tệp .csv trong trang.
Tệp .csv chứa một danh sách các tên người dùng mà tôi muốn được hiển thị. Tôi đang làm theo cách này vì những người cần cập nhật danh sách không biết gì về HTML và ban đầu nghĩ rằng đây sẽ là một cách dễ dàng hơn để làm điều đó.
Tất cả các đoạn mã mà tôi đã tìm thấy cố gắng tải lên một tệp và sau đó chỉ hiển thị nội dung cho đến khi bạn tải lại trang một lần nữa hoặc tôi không có đủ kiến thức để điều chỉnh mã để hoạt động.
Bất kỳ trợ giúp nào được đánh giá cao & Tyia
Andy
Mã @barthy rất gần với những gì tôi muốn là:
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split["\n"],
output = [],
i;
for [i = 0; i < lines.length; i++]
output.push[""
+ lines[i].slice[0,-1].split[","].join[" "]
+ " "];
output = "" + output.join[""] + "
";
var div = document.getElementById['container'];
div.innerHTML = output;
Nhưng muốn lấy dữ liệu từ tệp CSV
@Cars10 Ví dụ về những gì trong tệp CSV:
Heading_1,Heading_2,Heading_3,Heading_4
John, Smith, 29, Male
Andy, Jones, 32, Male
Abbey, Stewart, 35, Female
Nếu điều đó giúp
Giải pháp cho đến nay:
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
window.onload=function[]{ with [new XMLHttpRequest[]] {
onreadystatechange=cb; open['GET','data.csv',true]; responseType='text';send[];
}}
function cb[]{if[this.readyState===4]document.getElementById['main']
.innerHTML=tbl[this.responseText]; }
function tbl[csv]{ // do whatever is necessary to create your table here ...
return csv.split['\n']
.map[function[tr,i]{return ''
+tr.replace[/\t/g,' ']
+' ';}]
.join['\n']; }
Hey, this is my fabulous "dynamic" html page!
Chào mừng bạn đến với một hướng dẫn về cách đọc tệp CSV và hiển thị nó trong bảng HTML với JavaScript. Bạn đã đọc đúng. JavaScript hiện đại thực sự có khả năng đọc các tệp CSV và trực tiếp xuất chúng. Không cần phía máy chủ. Đọc về các ví dụ! Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.
TLDR - Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Thứ nhất, đây là liên kết tải xuống đến 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 toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Ảnh chụp màn hình
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.
Được rồi, bây giờ chúng ta hãy vào các ví dụ về việc đọc tệp CSV và hiển thị nó trong bảng HTML với JavaScript.
Tệp CSV giả
0-dummy.csv
Jo Doe,,465785
Joa Doe,,123456
Job Doe,,234567
Joe Doe,,345678
Jog Doe,,578456
Joh Doe,,378945
Joi Doe,,456789
Jon Doe,,987654
Jor Doe,,754642
Joy Doe,,124578
Hãy để chúng tôi bắt đầu với một tệp CSV giả, danh sách người dùng giả. Đối với những người chưa quen với các giá trị phân tách của Comma Comma:
- Các tập tin CSV chỉ là văn bản đơn giản.
- Chúng tôi sử dụng các dòng phá vỡ
\r\n
để chỉ ra các hàng. - Chúng tôi sử dụng dấu phẩy
,
để chỉ các cột. - Nếu ô chứa dấu phẩy, giá trị sẽ được đặt trong các trích dẫn. Ví dụ.
0Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
Ví dụ 1] Trình chọn tệp CSV đến bảng HTML
1a] HTML
1a-read-csv.html
1 Một trình chọn tệp chỉ giới hạn trong các tệp CSV.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
2 Bảng trống để hiển thị nội dung CSV.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
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
// CREDIT : //thegermancoder.com/2018/11/29/how-to-parse-csv-with-javascript/
reader.onloadend = [] => {
table.innerHTML = "";
let rows = reader.result.split["\r\n"];
for [let row of rows] {
let cols = row.match[/[?:\"[[^\"]*[?:\"\"[^\"]*]*]\"]|[[^\",]+]/g];
if [cols!=null] {
let tr = table.insertRow[];
for [let col of cols] {
let td = tr.insertCell[];
td.innerHTML = col.replace[/[^"|"$]/g, ""];
}
}
}
};
Đó là khá nhiều mã JavaScript, nhưng đây là một bản tóm tắt nhanh chóng.
3 Chúng tôi sẽ sử dụng đối tượng đầu đọc tệp này để đọc tệp CSV đã chọn.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
4 Khi người dùng chọn tệp CSV, chúng tôi sẽ đọc nó dưới dạng văn bản đơn giản.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
- Khi
5 được thực hiện, đọc tệp CSV đã chọn.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
6 Chia dữ liệu thô thành các hàng theo dòng phá vỡ.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
7 Bước thêm mỗi hàng vào các cột.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
8 vàHeading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
9 Tự giải thích Thêm các hàng và cột vào bảng HTML.Heading_1,Heading_2,Heading_3,Heading_4 John, Smith, 29, Male Andy, Jones, 32, Male Abbey, Stewart, 35, Female
Ví dụ 2] Ajax đọc tệp CSV
2a] HTML
2a-ajax-csv.html
Đối với ví dụ này, chúng tôi chỉ cần một bảng trống.
2b] 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 => {
// [B1] REMOVE OLD TABLE ROWS
table.innerHTML = "";
// [B2] GENERATE TABLE
let rows = csv.split["\r\n"];
for [let row of rows] {
let cols = row.match[/[?:\"[[^\"]*[?:\"\"[^\"]*]*]\"]|[[^\",]+]/g];
if [cols!=null] {
let tr = table.insertRow[];
for [let col of cols] {
let td = tr.insertCell[];
td.innerHTML = col.replace[/[^"|"$]/g, ""];
}
}
}
}];
Không còn nữa, điều này là khá giống nhau.
0 Nhận tệp CSV trên máy chủ.table { border-collapse: collapse; border: 2px black solid; font: 12px sans-serif; } td { border: 1px black solid; padding: 5px; } window.onload=function[]{ with [new XMLHttpRequest[]] { onreadystatechange=cb; open['GET','data.csv',true]; responseType='text';send[]; }} function cb[]{if[this.readyState===4]document.getElementById['main'] .innerHTML=tbl[this.responseText]; } function tbl[csv]{ // do whatever is necessary to create your table here ... return csv.split['\n'] .map[function[tr,i]{return '
';}] .join['\n']; }' +tr.replace[/\t/g,' '] +' Hey, this is my fabulous "dynamic" html page!
1 đọc CSV là văn bản đơn giản.table { border-collapse: collapse; border: 2px black solid; font: 12px sans-serif; } td { border: 1px black solid; padding: 5px; } window.onload=function[]{ with [new XMLHttpRequest[]] { onreadystatechange=cb; open['GET','data.csv',true]; responseType='text';send[]; }} function cb[]{if[this.readyState===4]document.getElementById['main'] .innerHTML=tbl[this.responseText]; } function tbl[csv]{ // do whatever is necessary to create your table here ... return csv.split['\n'] .map[function[tr,i]{return '
';}] .join['\n']; }' +tr.replace[/\t/g,' '] +' Hey, this is my fabulous "dynamic" html page!
2 Khá giống như trên. Chia chuỗi xuống thành các hàng/cột và tạo bảng HTML.table { border-collapse: collapse; border: 2px black solid; font: 12px sans-serif; } td { border: 1px black solid; padding: 5px; } window.onload=function[]{ with [new XMLHttpRequest[]] { onreadystatechange=cb; open['GET','data.csv',true]; responseType='text';send[]; }} function cb[]{if[this.readyState===4]document.getElementById['main'] .innerHTML=tbl[this.responseText]; } function tbl[csv]{ // do whatever is necessary to create your table here ... return csv.split['\n'] .map[function[tr,i]{return '
';}] .join['\n']; }' +tr.replace[/\t/g,' '] +' Hey, this is my fabulous "dynamic" html page!
Một 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 vấn đề về hiệu suất và các vấn đề về bộ nhớ với các tệp CSV lớn. Tại thời điểm viết, 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 trình chọn tệp, bạn có thể nhận được kích thước tệp đã chọn với
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
window.onload=function[]{ with [new XMLHttpRequest[]] {
onreadystatechange=cb; open['GET','data.csv',true]; responseType='text';send[];
}}
function cb[]{if[this.readyState===4]document.getElementById['main']
.innerHTML=tbl[this.responseText]; }
function tbl[csv]{ // do whatever is necessary to create your table here ...
return csv.split['\n']
.map[function[tr,i]{return ''
+tr.replace[/\t/g,' ']
+' ';}]
.join['\n']; }
Hey, this is my fabulous "dynamic" html page!
3.Kiểm tra khả năng tương thích
- Chức năng mũi tên - Caniuse
- API đầu đọ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 & Tài liệu tham khảo
- Cách phân tích CSV với JavaScript - lập trình viên Đức
- Hiển thị CSV dưới dạng bảng HTML trong PHP - mã Boxx
- JavaScript xuất mảng sang tệp CSV - mã Boxx
- JavaScript Read & Parse Tệp CSV [vào đối tượng Array] - Mã Boxx
Hướng dẫn YouTube
Infographics cheat tờ
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối 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!
Làm cách nào để hiển thị dữ liệu CSV trong HTML?
…tags. Pre tags will preserve the text formatting used in your CSV file. This is the easier approach, and does not require text transformation of the CSV file.