Fondo:

Quiero hacer una "aplicación" que use JavaScript / HTMLsolamente y se puede abrir con un navegador directamente desde el sistema de archivos. Esta aplicacióndebe Ser capaz de leer datos de otro archivo. Luego usaré JS para analizarlo y renderizar páginas. Como ejemplo simplificado, imagina que tengo un archivo CSV(descarga aquí):

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

Quiero poder leer el archivo utilizando JS y usar los datos que contiene para generar mi página.

Lo que he logrado hasta ahora:

Manifestación (haga clic con el botón derecho -> "Guardar como" para guardar HTML en su computadora). También está disponible enjsfiddle en modo semi-roto (el diseño está roto, pero debería ser funcionalmente correcto).

Simplemente arrastre y suelte el archivo de texto CSV en el cuadro de arrastrar y soltar, o seleccione el archivo de texto usando el menú de archivos, y JavaScript leerá, analizará el archivo y llenará la tabla.

Esto se basa en la API FileReader; La mayor parte del trabajo pesado se realiza mediante esta función:

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

Esto escasi Está bien, pero le incomoda al usuario cargar manualmente un archivo. Idealmente, debería poder cargarlo automáticamente, pero por razones de seguridad, ningún navegador lo permitirá ... todavía.

Requisitos de la solución:

Debe trabajar sin conexión; Es decir: no puede confiar en ningún servicio en línea. Esto también incluye servidores HTTP que se ejecutan en la máquina local. La idea es que esto se ejecute en cualquier computadora con solo un navegador instalado.

Debe funcionar cuando la página se abre utilizando elfile:/// protocolo (es decir, una página HTML en el disco duro).

Deberíano confíe en complementos de terceros (por ejemplo: Flash, Java,estremecimientos ActiveX). Estoy bastante seguro de que esto probablemente no funcionaría de todos modos si la página está enfile:///

Debe ser capaz de aceptararbitrario datos. Esto descarta la carga de un archivo en un formato de buen comportamiento que esté listo para el consumo como JSON.

Si funciona en cualquiera (idealmente ambos) Firefox o Chrome está bien. También está bien confiar en las API experimentales

Sé de antemano cuál es el nombre del archivo, por lo que podría estar codificado en el propio HTML.Alguna La solución que me permite leer un archivo desde el disco está bien, no tiene que usar la API FileReader.

Entonces, si hay un truco inteligente para cargar un archivo en una página, también está bien (tal vez cargarlo en un iframe invisible y hacer que JS recupere el contenido); eso está bien también