Comment lire un fichier CSV en HTML

Les fichiers CSV peuvent être lus en HTML en utilisant : Le framework JavaScript Papa Parse : analysez facilement les fichiers CSV et gérez automatiquement les options de configuration. Utilisation de l'API FileReader : lisez les fichiers CSV locaux directement côté client. Utilisez des bibliothèques tierces telles que jQuery CSV : s'intègre à jQuery pour fournir une manière simplifiée de travailler avec les données CSV.

Comment lire des fichiers CSV en utilisant HTML

CSV (Comma Separated Values) est un format de fichier texte couramment utilisé pour stocker des données tabulaires. Pour lire des fichiers CSV en HTML, vous pouvez suivre les étapes suivantes :

1. Utilisez le framework JavaScript

• Papa Parse :Une puissante bibliothèque d'analyse JavaScript qui peut facilement lire les fichiers CSV. Exemple de code :

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

• File Saver.js :Une bibliothèque JavaScript pour enregistrer des fichiers. Exemple de code :

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

2. Utilisation de l'API FileReader

• XMLHttpRequest :Un objet JavaScript utilisé pour envoyer des requêtes au serveur. Exemple de code :

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

• FileReader :Une API JavaScript pour lire les fichiers locaux. Exemple de code :

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. Utilisation de bibliothèques tierces

• jQuery CSV :Un plugin jQuery pour traiter les fichiers CSV. Exemple de code :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!