Bagaimana untuk membaca fail csv dalam html

Fail CSV boleh dibaca menggunakan HTML menggunakan: Rangka kerja JavaScript Papa Parse: Menghuraikan fail CSV dengan mudah dan mengendalikan pilihan konfigurasi secara automatik. Menggunakan API FileReader: Baca fail CSV tempatan secara langsung pada bahagian klien. Gunakan perpustakaan pihak ketiga seperti jQuery CSV: Bersepadu dengan jQuery untuk menyediakan cara yang dipermudahkan untuk bekerja dengan data CSV.

Cara membaca fail CSV menggunakan HTML

CSV (Comma Separated Values) ialah format fail teks yang biasa digunakan untuk menyimpan data jadual. Untuk membaca fail CSV menggunakan HTML, anda boleh mengambil langkah berikut:

1 Gunakan rangka kerja JavaScript

• Papa Parse: Pustaka penghuraian JavaScript yang berkuasa yang boleh membaca fail CSV dengan mudah. Kod sampel:

<code class="js">Papa.parse("data.csv", {
  // 配置选项
  header: true,
  delimiter: ",",
  skipEmptyLines: true,
  complete: function (results) {
    // 处理结果数据
  }
});</code>

• File Saver.js: Pustaka JavaScript untuk menyimpan fail. Kod contoh:

<code class="js">const csvData = "name,age,city\nJohn,25,New York";
const blob = new Blob([csvData], { type: "text/csv" });
FileSaver.saveAs(blob, "data.csv");</code>

2. Menggunakan API FileReader

• XMLHttpRequest: Objek JavaScript yang digunakan untuk menghantar permintaan ke pelayan. Kod contoh:

<code class="js">const xhr = new XMLHttpRequest();
xhr.onload = function () {
  const csvData = xhr.responseText;
  // 手动解析 CSV 数据
};
xhr.open("GET", "data.csv");
xhr.send();</code>

• Pembaca Fail: API JavaScript untuk membaca fail setempat. Kod contoh:

<code class="js">const file = document.querySelector('input[type="file"]');
file.addEventListener("change", function () {
  const reader = new FileReader();
  reader.onload = function () {
    const csvData = reader.result;
    // 手动解析 CSV 数据
  };
  reader.readAsText(file.files[0]);
});</code>

3. Menggunakan perpustakaan pihak ketiga

• jQuery CSV: Pemalam jQuery untuk memproses fail CSV. Kod contoh:

<code class="js">$.ajax({
  url: "data.csv",
  success: function (data) {
    // data 将包含 CSV 数据
  }
});

// 也可以使用以下代码从本地文件读取 CSV
$("#file-input").csv({
  onComplete: function (results) {
    // results 将包含 CSV 数据
  }
});</code>

Atas ialah kandungan terperinci Bagaimana untuk membaca fail csv dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!