Làm cách nào để đọc tệp csv trong html?

Ghi chú. Bạn có thể thay đổi bố cục hoặc thuộc tính cho dữ liệu đã nhập bất kỳ lúc nào. Trên menu Dữ liệu, trỏ tới Lấy Dữ liệu Ngoài, rồi bấm vào Chỉnh sửa Nhập Văn bản hoặc Thuộc tính Phạm vi Dữ liệu. Nếu bạn chọn Chỉnh sửa nhập văn bản, hãy chọn tệp mà bạn đã nhập ban đầu, rồi thực hiện các thay đổi đối với dữ liệu ngoài trong Trình hướng dẫn nhập văn bản. Bằng cách chọn Thuộc tính Phạm vi Dữ liệu, bạn có thể đặt các tùy chọn định nghĩa truy vấn, kiểm soát làm mới và bố cục dữ liệu cho dữ liệu ngoài

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

Làm cách nào để đọc tệp csv trong html?

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,[email protected],465785
Joa Doe,[email protected],123456
Job Doe,[email protected],234567
Joe Doe,[email protected],345678
Jog Doe,[email protected],578456
Joh Doe,[email protected],378945
Joi Doe,[email protected],456789
Jon Doe,[email protected],987654
Jor Doe,[email protected],754642
Joy Doe,[email protected],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




 


 

  1. Để 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
  2. Trình chọn tệp, chỉ giới hạn ở tệp CSV
  3. 
    
    
     
    
    
     
    
    
    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. 
    
    
     
    
    
     
    
    
    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. 
    
    
     
    
    
     
    
    
    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
  3. 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

Làm cách nào để hiển thị dữ liệu CSV trong bảng HTML?

Bảng CSV sang HTML .
Sao chép kho lưu trữ này (trong dòng lệnh) git clone git@github. com. derekeder/csv-to-html-table. git cd csv-to-html-bảng
Thêm tệp CSV của bạn vào dữ liệu/thư mục
trong chỉ mục. html đặt các tùy chọn của bạn trong CsvToHtmlTable. .
chạy nó. .
Triển khai nó. .
iframe nó (tùy chọn)

Làm cách nào để chuyển đổi CSV sang HTML?

Cách chuyển đổi CSV sang HTML .
Tải (các) tệp csv lên Chọn tệp từ Máy tính, Google Drive, Dropbox, URL hoặc bằng cách kéo tệp trên trang
Chọn "sang html" Kết quả là chọn html hoặc bất kỳ định dạng nào khác mà bạn cần (hơn 200 định dạng được hỗ trợ)
Tải xuống html của bạn

Làm cách nào để đọc dữ liệu từ tệp CSV trong JavaScript?

Tệp CSV sử dụng JavaScript. Để chuyển đổi hoặc phân tích cú pháp dữ liệu CSV thành một mảng, chúng ta cần lớp FileReader của JavaScript, lớp này chứa phương thức có tên readAsText() sẽ đọc nội dung tệp CSV và phân tích kết quả dưới dạng văn bản chuỗi. Nếu chúng ta có chuỗi, chúng ta có thể tạo một hàm tùy chỉnh để biến chuỗi thành một mảng