ホームページ > 記事 > ウェブフロントエンド > CSVファイルをHTMLで読み込む方法
CSV ファイルは、HTML を使用して読み取ることができます。JavaScript フレームワーク Papa Parse: CSV ファイルを簡単に解析し、構成オプションを自動的に処理します。 FileReader API の使用: ローカル CSV ファイルをクライアント側で直接読み取ります。 jQuery CSV などのサードパーティ ライブラリを使用する: jQuery と統合して、CSV データを操作する簡略化された方法を提供します。
CSV (カンマ区切り値) は、テーブル データを保存するために使用される一般的なテキスト ファイル形式です。 HTML を使用して CSV ファイルを読み取るには、次の手順を実行できます:
<code class="js">Papa.parse("data.csv", { // 配置选项 header: true, delimiter: ",", skipEmptyLines: true, complete: function (results) { // 处理结果数据 } });</code>
<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>
<code class="js">const xhr = new XMLHttpRequest(); xhr.onload = function () { const csvData = xhr.responseText; // 手动解析 CSV 数据 }; xhr.open("GET", "data.csv"); xhr.send();</code>
<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>
<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 サイトの他の関連記事を参照してください。