Tło:

Chcę stworzyć „aplikację” wykorzystującą JavaScript / HTMLtylko i może zostać otwarty przez przeglądarkę bezpośrednio z systemu plików. Ta aplikacjamusi być w stanie odczytać dane z innego pliku. Następnie użyję JS do analizy i renderowania stron. Jako uproszczony przykład wyobraź sobie, że mam plik CSV(Pobierz tutaj):

Mark Rodgers,[email protected],Accounting
[...]
Melissa Jones,[email protected],CEO

Chcę móc odczytać plik za pomocą JS i użyć w nim danych do wygenerowania mojej strony.

Co do tej pory osiągnąłem:

Próbny (kliknij prawym przyciskiem myszy -> „Zapisz jako”, aby zapisać kod HTML na komputerze). Jest również dostępny najsfiddle w półprzerwany sposób (układ jest uszkodzony, ale nadal powinien być poprawny funkcjonalnie).

Wystarczy przeciągnąć i upuścić plik tekstowy CSV do okna przeciągania i upuszczania lub wybrać plik tekstowy za pomocą menu pliku, a JavaScript odczyta, przeanalizuje plik i zapełni tabelę.

Opiera się to na API FileReader; większość ciężkiego podnoszenia odbywa się za pomocą tej funkcji:

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.target.files || evt.dataTransfer.files; // FileList object.
    var file = files[0];

    // this creates the FileReader and reads stuff as text
    var fr = new FileReader();
    fr.onload = parse;
    fr.readAsText(file);

    // this is the function that actually parses the file
    // and populates the table
    function parse()
    {
        var table = document.getElementById('emps');
        var employees = fr.result.split('\n'); var c = 0;
        for (var i in employees)
        {
            var employee = employees[i].split(',');
            if (employee.length == 3)
            {
                var row = document.createElement('tr');
                row.innerHTML = "<td>" + employee.join("</td><td>") + "</td>";
                table.appendChild(row);
                c++;
            }
        }
        document.getElementById('result').innerHTML = '<span>Added ' + c + ' employees from file: ' + file.name + '</span>';
    }
}

To jestprawie OK, ale utrudnia użytkownikowi ręczne ładowanie pliku. Idealnie byłoby, gdyby był w stanie załadować go automatycznie, ale ze względów bezpieczeństwa żadna przeglądarka na to nie pozwoli ... jeszcze.

Wymagania dotyczące rozwiązania:

Musi pracować w trybie offline; tj .: nie może polegać na żadnej usłudze online. Obejmuje to również serwery HTTP działające na komputerze lokalnym. Chodzi o to, aby uruchomić to na dowolnym komputerze z zainstalowaną tylko przeglądarką.

Musi działać, gdy strona jest otwierana za pomocąfile:/// protokół (tj. strona HTML na dysku twardym).

Powiniennie polegaj na dodatkach innych firm (np .: Flash, Java,drży ActiveX). Jestem prawie pewien, że i tak nie zadziałałyby, gdyby strona byłafile:///

Musi być w stanie zaakceptowaćarbitralny dane. To wyklucza ładowanie pliku w dobrze zachowanym formacie, który jest gotowy do konsumpcji, taki jak JSON.

Jeśli działa na Firefox lub Chrome (najlepiej w obu), jest w porządku. Można również polegać na eksperymentalnych interfejsach API

Wiem, jaka jest wcześniej nazwa pliku, więc może być zakodowana w samym HTML.Każdy rozwiązanie, które pozwala mi odczytać plik z dysku, jest w porządku, nie musi korzystać z API FileReader.

Jeśli więc istnieje sprytny hack, aby załadować plik na stronę, która również jest w porządku (może załadować go do niewidocznej ramki iframe i pobrać JS z zawartości); w porządku też.