Javascript có thể đọc csv không?

Để nhập và xuất tệp csv trong đường ray, chúng tôi đã có khá nhiều công cụ hỗ trợ và hướng dẫn bài viết. Tuy nhiên, nếu cần phải xem trước nội dung của tệp csv trước khi tiến hành nhập dữ liệu vào cơ sở dữ liệu để kiểm tra thì ta phải làm như thế nào?. Ở bài viết này, mình xin giới thiệu tới mọi người Papaparse-một plugin rất hữu ích và dễ sử dụng được viết bằng javascript để xem trước file csv nội dung

Cài đặt

Cách cài đặt papaparse cũng rất đơn giản, bạn chỉ cần tải xuống file papaparse. tối thiểu. js, nhập tệp này vào thư mục

Column 1,Column 2,Column 3,Column 4
1,2,3,4
a,b,c,d
x,y,z,r

0 , và khai báo đường dẫn cho nó trong ứng dụng tệp. js

Xin chào, 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. You have read true. JavaScript hiện thực khả năng đọc các tệp CSV và trực tiếp xuất chúng. Không cần máy chủ. Đọc về các ví dụ

Nội dung chính Hiển thị

• 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
• File CSV giả
• Ví dụ 1) Trình chọn tệp CSV vào bảng HTML
• Ví dụ 2) Ajax đọc tệp CSV
• Một lưu ý về hiệu suất
• 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 ăn gian tờ
• LƯỚI THÚC
• Làm cách nào để nhúng tệp CSV trong HTML?
• Làm thế nào để bạn hiển thị dữ liệu trong một bảng trong HTML?
• Làm cách nào để hiển thị tệp CSV trong bình HTML?
• Làm cách nào để hiển thị dữ liệu trong tệp CSV?

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 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 như vậy với toàn bộ thế giới, nếu bạn cần trả lời câu hỏi khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận hỗ trợ 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 sử dụng và 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

File CSV giả

0-hình nộm. 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 tệp CSV giả, danh sách người dùng giả. Đối chiếu với những người chưa quen với các giá trị phân tách của Dấu phẩy Dấu phẩy

• 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ỡ
  6 để chỉ ra các hàng hóa
• Chúng tôi sử dụng dấu hôn
  7 để chỉ các cột
• Nếu ô chứa dấu phẩy, giá trị sẽ được đặt trong trích dẫn. Ví dụ.
  8

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

1a) HTML

1a-read-csv. html

• 9 Một lựa chọn tệp giới hạn chỉ trong các tệp CSV

• // (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 : https://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, "");
        }
      }
    }
  };

  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
// CREDIT : https://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

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

2. 1 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
3. Khi
   2 được thực hiện, hãy đọc tệp CSV đã chọn

   • 3 Chia dữ liệu thành các hàng theo dòng phá vỡ

   • 4 Bước thêm từng hàng vào các cột

   • 5 và______26 Tự giải thích thêm các hàng và cột vào bảng HTML

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

2a) HTML

2a-ajax-csv. html

0

Đố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

1

Không còn nữa, điều này khá giống nhau

• 7 Nhận tệp CSV trên máy chủ

• 8 đọc CSV là văn bản đơn giản

• 9 Like same as on. Chia chuỗi xuống 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 đang 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 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 thận trọng

P. S. Nếu bạn đang sử dụng tệp chọn tệp, bạn có thể nhận được kích thước tệp đã chọn với kích thướ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
// CREDIT : https://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, "");
      }
    }
  }
};

0

Kiểm tra khả năng tương thích

• Chức năng mũi tên - Caniuse
• API đầu đọc - Caniuse
• Loading - 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 Đọc & Phân tích Tệp CSV (vào Mảng đối tượng) - Mã Boxx

Hướng dẫn YouTube

Infographics ăn gian tờ

Table CSV to HTML in JavaScript (bấm to zoom to)

LƯỚI 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 để nhúng tệp CSV trong HTML?

Đầu tiên, tệp CSV, tức là tệp văn bản được phân tách bằng dấu phẩy, sẽ được đọc bằng API Filereader HTML5 dưới dạng chuỗi. Sau đó, chuỗi sẽ được phân tích cú pháp vào các hàng và cột và sẽ được hiển thị dưới dạng bảng HTML trên trang web trong trình duyệt. Đánh dấu HTML bao gồm một trình điều khiển tải xuống FilePload (đầu vào tệp HTML) và nút HTML tức thời được tải lên