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ファイルも簡単に読み込むことができます。サンプルコード:

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

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

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

2. FileReader API の使用

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

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

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

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]); });

3. サードパーティ ライブラリを使用する

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

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

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