Hướng dẫn import csv to html table javascript - nhập csv vào bảng html javascript

Question

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ụ!

Nội dung chính Show

TLDR - Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Ghi chú nhanh
Ảnh chụp màn hình
Mã hóa ví dụ Tải xuống
Tệp CSV giả
Ví dụ 1) Trình chọn tệp CSV đến bảng HTML
Ví dụ 2) Ajax đọc tệp CSV
Một lưu ý về hiệu suất
Hàng đầu tiên là tiêu đề
Kiểm tra khả năng tương thích
Liên kết & Tài liệu tham khảo
Hướng dẫn YouTube
Infographics cheat tờ
KẾT THÚC

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 ngắt \r\n để chỉ ra các hàng.
Chúng tôi sử dụng dấu phẩy , để chỉ ra 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ụ. ________số 8

Ví dụ 1) Trình chọn tệp CSV đến bảng HTML

1a) HTML

1a-read-csv.html

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

Để làm cho mọi thứ trở nên dễ dàng, chúng tôi sẽ tải thư viện CSV.JS nhẹ để xử lý CSV.
<input type="file"> Một trình chọn tệp, chỉ giới hạn trong các tệp CSV.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

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;
    }
  }
};

Đúng, đó là tất cả. Điều này nên khá đơn giản.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

1 Chúng tôi sẽ sử dụng đối tượng đầu đọc tệp này để đọc tệp CSV đã chọn.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

2 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.

Khi

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

3 đã tải đầy đủ tệp CSV đã chọn.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

4 Vòng lặp qua các hàng của tệp CSV được phân tích cú pháp và chèn các hàng bảng.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

5 Vòng lặp qua các cột của mỗi hàng và thêm các ô bảng.

Ví dụ 2) Ajax đọc tệp CSV

2a) HTML

2a-ajax-csv.html

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="2b-ajax-csv.js"></script>
 
<!-- (B) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

Đố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 => {
  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 nữa, điều này là khá giống nhau.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

6 Nhận tệp CSV trên máy chủ.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

7 đọc CSV là văn bản đơn giản.

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

8 Khá giống như trên. Vòng lặp qua các hàng/cột và tạo bảng HTML.

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

<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

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

// (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ì

// (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 chỉ cho hàng đầu tiên.

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

CSV.JS - GitHub
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ờ

Bảng CSV đến HTML trong JavaScript (bấm để phóng to)

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!

programming javascript