Hintergrund:

Ich möchte eine "App" erstellen, die JavaScript / HTML verwendetnur und kann von einem Browser direkt aus dem Dateisystem geöffnet werden. Diese AppMuss in der Lage sein, Daten aus einer anderen Datei zu lesen. Ich werde dann JS verwenden, um es zu analysieren und Seiten zu rendern. Stellen Sie sich als vereinfachtes Beispiel vor, ich hätte eine CSV-Datei(Hier herunterladen):

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

Ich möchte in der Lage sein, die Datei mit JS zu lesen und Daten darin zu verwenden, um meine Seite zu generieren.

Was ich bisher erreicht habe:

Demo (Klicken Sie mit der rechten Maustaste auf "Speichern unter", um HTML auf Ihrem Computer zu speichern.) Es ist auch verfügbar aufjsfiddle in halb gebrochener Form (Layout ist defekt, sollte aber funktionsrichtig sein).

Ziehen Sie die CSV-Textdatei einfach per Drag & Drop in das Drag & Drop-Feld, oder wählen Sie die Textdatei über das Dateimenü aus, und JavaScript liest die Datei, parst sie und füllt die Tabelle.

Dies basiert auf der FileReader-API. Das meiste Heben wird mit dieser Funktion erledigt:

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>';
    }
}

Das istfast OK, aber der Benutzer kann eine Datei nicht manuell laden. Idealerweise sollte es in der Lage sein, es automatisch zu laden, aber aus Sicherheitsgründen wird dies noch kein Browser zulassen.

Lösungsvoraussetzungen:

Muss offline arbeiten; Das heißt: Es kann sich nicht auf einen Onlinedienst verlassen. Dies schließt auch HTTP-Server ein, die auf dem lokalen Computer ausgeführt werden. Die Idee ist, dies auf jedem Computer auszuführen, auf dem nur ein Browser installiert ist.

Muss funktionieren, wenn die Seite mit der Taste geöffnet wirdfile:/// Protokoll (dh: eine HTML-Seite auf der Festplatte).

Solltenicht sich auf Add-Ons von Drittanbietern verlassen (zB: Flash, Java,zittert ActiveX). Ich bin mir ziemlich sicher, dass diese wahrscheinlich sowieso nicht funktionieren würden, wenn die Seite in istfile:///

Es muss akzeptieren könnenwillkürlich Daten. Dadurch wird ausgeschlossen, dass eine Datei in einem anständigen Format geladen wird, das wie JSON zum Verzehr bereit ist.

Wenn es auf Firefox oder Chrome funktioniert, ist es in Ordnung. Es ist auch in Ordnung, sich auf experimentelle APIs zu verlassen

Ich weiß vorher, wie der Dateiname lautet, so dass er im HTML selbst codiert werden kann.Irgendein Die Lösung, mit der ich eine Datei von der Festplatte lesen kann, ist in Ordnung. Sie muss nicht die FileReader-API verwenden.

Wenn es also einen cleveren Hack gibt, um eine Datei in eine Seite zu laden, die auch in Ordnung ist (laden Sie sie möglicherweise in einen unsichtbaren Iframe und lassen Sie JS den Inhalt abrufen); das ist auch ok