Usando um arquivo local como fonte de dados em JavaScript

Fundo:

Eu quero fazer um "aplicativo" que usa JavaScript / HTMLsó e pode ser aberto por um navegador diretamente do sistema de arquivos. Este aplicativodevo ser capaz de ler dados de outro arquivo. Depois, usarei o JS para analisá-lo e renderizar páginas. Como exemplo simplificado, imagine que eu tenha um arquivo CSV(baixe aqui):

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

Eu quero ser capaz de ler o arquivo usando JS e usar dados nele para gerar minha página.

O que eu tenho feito até agora:

Demonstração (clique com o botão direito -> "Salvar como" para salvar o HTML no seu computador). Também está disponível emjsfiddle de forma semi-quebrada (o layout está quebrado, mas ainda deve estar funcionalmente correto).

Basta arrastar e soltar o arquivo de texto CSV na caixa de arrastar e soltar ou selecionar o arquivo de texto usando o menu Arquivo, e o JavaScript lerá, analisará o arquivo e preencherá a tabela.

Isso depende da API FileReader; a maior parte do trabalho pesado é feita por esta função:

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

Isto équase OK, mas incomoda o usuário em carregar manualmente um arquivo. Idealmente, ele deve ser capaz de carregá-lo automaticamente, mas por motivos de segurança, nenhum navegador permitirá isso ... ainda.

Requisitos da Solução:

Deve trabalhar offline; isto é: não pode confiar em nenhum serviço online. Isso também inclui servidores HTTP em execução na máquina local. A ideia é que isso seja executado em qualquer computador com apenas um navegador instalado.

Deve funcionar quando a página é aberta usando ofile:/// protocolo (ou seja: uma página HTML no disco rígido).

Devemosnão dependem de complementos de terceiros (por exemplo: Flash, Java,arrepios ActiveX). Tenho certeza que estes provavelmente não funcionariam de qualquer maneira, se a página está emfile:///

Deve ser capaz de aceitararbitrário dados. Isso exclui o carregamento de um arquivo em um formato bem comportado, pronto para consumo, como o JSON.

Se funciona em ambos (idealmente ambos) Firefox ou Chrome, tudo bem. Também é aceitável contar com APIs experimentais

Eu sei qual é o nome do arquivo antes, então ele pode ser codificado no próprio HTML.Qualquer solução que me permite ler um arquivo do disco é bom, não tem que usar a API FileReader.

Então, se há um hack inteligente para carregar um arquivo em uma página, tudo bem também (talvez carregá-lo em um iframe invisível e ter o JS recuperando o conteúdo); tudo bem também.

questionAnswers(6)

yourAnswerToTheQuestion