Odczyt CSV w javascript i File API
Pokażę jak za pomocą javascript i html5 File api odczytać dane z pliku CSV i wstawić je np. do textarei. Do odczytu wykorzystamy FileReader API. Najpierw sprawdzamy czy przeglądarka obsługuje tę funkcjonalność.
function handleFiles(files) {
if (window.FileReader) {
// FileReader jest obsługiwany.
} else {
alert('FileReader nie jest obsługiwany.');
}
}
<input type="file" id="csv" onchange="handleFiles(this.files)" accept=".csv">Funkcją handleFiles przechwytujemy wybrane pliki, ale nas interesuje tylko jeden.
function handleFiles(files) {
if (window.FileReader) {
getAsText(files[0]);
} else {
alert('FileReader nie jest obsługiwany.');
}
}
function getAsText(fileToRead) {
var reader = new FileReader();
reader.readAsText(fileToRead);
reader.onload = loadHandler;
reader.onerror = errorHandler;
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
for (var i=0; i<allTextLines.length; i++) {
var data = allTextLines[i].split(';');
var tarr = [];
for (var j=0; j<data.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
}
return lines;
}
function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
alert("Nie można odczytać pliku.");
}
}
W naszym przykładzie chcemy odczytać plik CSV jako tekst. Robimy to w funkcji getAsText.
Po odczytaniu referencji do pliku używamy metody readAsText, aby odczytać dane jako tekst (FileReader posiada też inne metody:
readAsBinaryString oraz readAsArrayBuffer).
Przetwarzamy go potem funkcją processData, która zwraca tablicę składającą się z wierszy pliku CSV.
