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.