CSVファイルをHTMLで読み込む方法

CSV ファイルは、HTML を使用して読み取ることができます。JavaScript フレームワーク Papa Parse: CSV ファイルを簡単に解析し、構成オプションを自動的に処理します。 FileReader API の使用: ローカル CSV ファイルをクライアント側で直接読み取ります。 jQuery CSV などのサードパーティ ライブラリを使用する: jQuery と統合して、CSV データを操作する簡略化された方法を提供します。

HTML を使用して CSV ファイルを読み取る方法

CSV (カンマ区切り値) は、テーブル データを保存するために使用される一般的なテキスト ファイル形式です。 HTML を使用して CSV ファイルを読み取るには、次の手順を実行できます:

1. JavaScript フレームワークを使用します

• Papa Parse:強力な JavaScript 解析ライブラリ。 CSVファイルも簡単に読み込むことができます。サンプルコード:

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

• File Saver.js: ファイルを保存するための JavaScript ライブラリ。サンプル コード:

<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. FileReader API の使用

• XMLHttpRequest: サーバーにリクエストを送信するために使用される JavaScript オブジェクト。サンプル コード:

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

• FileReader: ローカル ファイルを読み取るための JavaScript API。サンプル コード:

<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. サードパーティ ライブラリを使用する

• jQuery CSV:CSV ファイルを処理するための jQuery プラグイン。サンプルコード:

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

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

以上がCSVファイルをHTMLで読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。