Hướng dẫn can we read csv file using javascript? - chúng ta có thể đọc tệp csv bằng javascript không?

Question

Đăng vào ngày 18 tháng 4 năm 2021

Nội dung chính Show

Phân tích cú pháp chuỗi CSV vào một mảng
Sự kết luận
JavaScript có thể phân tích CSV không?
Làm cách nào để đọc tệp CSV trong HTML?
Làm thế nào để bạn đọc tệp CSV trong React JS?
Làm cách nào để đọc tệp CSV trong Node JS?

Tìm hiểu cách sử dụng JavaScript để chuyển đổi dữ liệu CSV thành một mảng

Hướng dẫn này sẽ giúp bạn tìm hiểu cách nhận tệp CSV bằng phần tử HTML

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

2 và phân tích nội dung dưới dạng mảng JavaScript.

Để chuyển đổi hoặc phân tích dữ liệu CSV thành

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

3, bạn cần sử dụng lớp JavaScript, ____ ____14, chứa một phương thức gọi là

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

5 sẽ đọc dữ liệu tệp CSV và phân tích kết quả là văn bản

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

6.

Lớp

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

4 là API Web, vì vậy giải pháp này chỉ hoạt động trong trình duyệt. Nếu bạn cần phân tích tệp CSV từ Node.js, hãy xem JavaScript của tôi đọc hướng dẫn CSV.

Khi bạn có

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

6, bạn có thể tạo một hàm tùy chỉnh để biến chuỗi thành

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

3.

Ví dụ: tệp CSV có nội dung sau:

name,role,country
Sarene,Help Desk Operator,Thailand
Olvan,Nurse Practicioner,China
Janos,Cost Accountant,China
Dolph,Assistant Manager,China
Ariela,Database Administrator I,Azerbaijan
Lane,Environmental Tech,Indonesia
Griselda,Senior Quality Engineer,Portugal
Manda,Physical Therapy Assistant,Brazil
Leslie,Information Systems Manager,Japan
Aleen,Cost Accountant,Canada

Sẽ được chuyển đổi thành mảng JavaScript sau:

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

Mã cho hướng dẫn này được chia sẻ ở đây.

Đầu tiên, hãy để Lừa xem cách chấp nhận tệp CSV từ trình duyệt bằng các phần tử HTML.

Bạn cần phải có biểu mẫu HTML chấp nhận tệp CSV bằng phần tử

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

2. Đây là một cách đơn giản để tạo ra một cách:

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

Bây giờ bạn đã sẵn sàng các yếu tố HTML, đó là thời gian để viết một kịch bản sẽ lắng nghe sự kiện biểu mẫu ____ ____21.

Ngay dưới thẻ

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

2, ghi thẻ

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

3 với nội dung sau:

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

Đầu tiên, bạn cần mã

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

4 để ngăn chặn hành vi gửi mặc định của trình duyệt, sẽ làm mới trang. Sau đó, bạn có thể viết mã để thực thi khi sự kiện

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

1 được kích hoạt bởi người dùng.

Bạn cần lấy tệp CSV đã tải lên bằng JavaScript như thế này:

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
});

Sau đó, bạn cần tạo một thể hiện mới của lớp

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

4 bằng mã sau:

const reader = new FileReader();

Đầu tiên, bạn cần xác định những gì xảy ra khi thao tác đọc đã được hoàn thành với trình xử lý sự kiện

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

7. Kết quả của hoạt động đọc được chuyển đến thuộc tính

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

8 như sau:

const reader = new FileReader();
reader.onload = function (event) {
  console.log(event.target.result); // the CSV content as string
};

Sau đó, bạn có thể hướng dẫn

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

9 đọc một tệp cụ thể như sau:

Bây giờ bạn đã biết cách thức hoạt động của JavaScript

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

4, hãy để Lôi đặt mã với nhau để đọc tệp CSV đã tải lên. Mã trang HTML đầy đủ sẽ như sau:

<head> head>
<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
  <script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");

    myForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const input = csvFile.files[0];
      const reader = new FileReader();

      reader.onload = function (e) {
        const text = e.target.result;
        document.write(text);
      };

      reader.readAsText(input);
    });
  script>
body>

Bạn có thể kiểm tra mã bằng tệp

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

1 được cung cấp trong repo GitHub.

Bạn sẽ thấy nội dung CSV được hiển thị trên trình duyệt của bạn. Điều này có nghĩa là

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

3 đã có thể đọc nội dung tệp CSV dưới dạng chuỗi mà không có bất kỳ vấn đề nào. Bạn chỉ cần phân tích chuỗi này như một mảng các đối tượng tiếp theo.

Phân tích cú pháp chuỗi CSV vào một mảng

Để phân tích chuỗi CSV vào một mảng, bạn cần ghi một mã sẽ tách chuỗi giữa các tiêu đề CSV và hàng CSV. Sau đó, bạn cần đặt mỗi hàng làm một phần tử đối tượng, sử dụng các tiêu đề làm tên thuộc tính và hàng làm giá trị.

Đầu tiên, hãy tạo một chức năng mới gọi là

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

3 chấp nhận hai tham số:

Một chuỗi nội dung CSV

Phân đoạn (hoặc phân tách) của nội dung CSV, thường là dấu phẩy

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

4

Ở đây, chức năng cú pháp chức năng:

function csvToArray(str, delimiter = ",") {}

Trong chức năng này, bạn cần tạo hai mảng được gọi là

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

5 và

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

6.

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

5 sẽ chứa hàng đầu tiên của tệp CSV, trong khi

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

6 sẽ chứa tất cả các giá trị, từ hàng thứ hai đến hàng cuối cùng.

Điều này có thể đạt được bằng cách cắt chuỗi đầu tiên, sau đó sử dụng phương thức

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

9 để chia một chuỗi thành một mảng.

Đây là mã để làm như vậy:

function csvToArray(str, delimiter = ",") {
  // slice from start of text to the first \n index
  // use split to create an array from string by delimiter
  const headers = str.slice(0, str.indexOf("\n")).split(delimiter);

  // slice from \n index + 1 to the end of the text
  // use split to create an array of each csv value row
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");
}

Khi bạn có cả

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

5 và

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

6, đó là thời gian để tạo ra mảng các đối tượng. Đầu tiên, bạn cần ánh xạ mảng

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

6 và

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

9 Các giá trị từ mỗi hàng vào một mảng.

Sau đó, bạn cần sử dụng phương thức

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
});

4 trên mảng

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

5, trả về một đối tượng với mỗi

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
});

6 làm tên thuộc tính và dữ liệu từ

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
});

7 ở cùng chỉ mục với giá trị thuộc tính.

Cuối cùng, bạn chỉ cần trả về từng hàng được ánh xạ làm phần tử mảng. Mã chức năng đầy đủ như sau:

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

0

Với điều đó, chức năng

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

3 của bạn đã hoàn thành. Bạn chỉ cần gọi chức năng từ sự kiện

<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  form>
body>

7:

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

1

Bạn có thể xem mã HTML đầy đủ trong repo GitHub

Sự kết luận

Bạn chỉ học cách tạo một mảng JavaScript ra khỏi tệp CSV được tải lên thông qua biểu mẫu HTML

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

2. Vào những thời điểm khác, bạn có thể muốn phân tích một mảng CSV được lấy từ API hoặc URL từ xa dưới dạng mảng.

Tùy thuộc vào dữ liệu được trả về từ yêu cầu của bạn, bạn có thể sử dụng

const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

4 để đọc nội dung CSV dưới dạng chuỗi trước hoặc bạn chỉ cần phân tích chuỗi dưới dạng mảng nếu bạn đã nhận được chuỗi từ API của mình.

Ngoài ra, hãy chú ý đến

const reader = new FileReader();

2 của tệp CSV của bạn. Hàm

<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
script>

3 đã có một mặc định hợp lý

const reader = new FileReader();

2 là dấu phẩy, nhưng bạn có thể sử dụng các ký hiệu khác. Nếu điều đó như vậy, bạn có thể chuyển đúng

const reader = new FileReader();

2 làm đối số thứ hai cho cuộc gọi chức năng.

Vui lòng sửa đổi các ví dụ mã để phù hợp với yêu cầu của bạn 😉

JavaScript có thể phân tích CSV không?

Các giá trị phân tách dấu phẩy (CSV) được sử dụng như một định dạng phổ biến để trao đổi dữ liệu bảng giữa bảng tính và cơ sở dữ liệu quan hệ. Trong hành động JavaScript, bạn có thể phân tích dữ liệu CSV bằng thư viện CSV.you can parse CSV data using the csv library.

Làm cách nào để đọc 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ị trong bảng HTML. Đánh dấu HTML bao gồm một điều khiển tải FilePload (đầu vào tệp HTML) và nút HTML tức là tải lên.using HTML5 FileReader API as String. Then the String will be parsed into Rows and Columns and will be displayed in HTML Table. The HTML Markup consists of a FileUpload control (HTML File Input) and a HTML Button i.e. Upload.

Làm thế nào để bạn đọc tệp CSV trong React JS?

Hàm xử lý sẽ phân tích dữ liệu CSV bằng trình phân tích cú pháp PAPA và đặt trạng thái dữ liệu thành các cột của tệp CSV.Sau đó, cuối cùng chúng tôi trả về thành phần chứa một phần tử đầu vào để lấy tệp đã tải lên, một nút để phân tích dữ liệu trên nhấp chuột và một thùng chứa để hiển thị bất kỳ lỗi hoặc dữ liệu được phân tích cú pháp nào.. Then we finally return the component which contains an input element to take the uploaded file, a button to parse the data on click, and a container to show any errors or parsed data.

Làm cách nào để đọc tệp CSV trong Node JS?

Bạn sẽ sử dụng phương thức CreateReadstream () của mô -đun FS để đọc dữ liệu từ tệp CSV và tạo luồng có thể đọc được.Sau đó, bạn sẽ gửi luồng vào một luồng khác được khởi tạo với mô-đun CSV-Parse để phân tích các khối dữ liệu.Khi các khối dữ liệu đã được phân tích cú pháp, bạn có thể ghi lại chúng vào bảng điều khiển.use the fs module's createReadStream() method to read the data from the CSV file and create a readable stream. You will then pipe the stream to another stream initialized with the csv-parse module to parse the chunks of data. Once the chunks of data have been parsed, you can log them in the console.

programming javascript Export csv JavaScript Papaparse Javascript csv format Read csv browser

Hướng dẫn can we read csv file using javascript? - chúng ta có thể đọc tệp csv bằng javascript không?

Phân tích cú pháp chuỗi CSV vào một mảng

Sự kết luận

JavaScript có thể phân tích CSV không?

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

Làm thế nào để bạn đọc tệp CSV trong React JS?

Làm cách nào để đọc tệp CSV trong Node JS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội