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.');
    }
}
W pliku html wystarczy dodać zwykłe pole typu file.
<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.

Komentarze 0

Dodaj komentarz