Como ler e gravar em arquivo usando JavaScript?


177

Alguém pode fornecer um código de exemplo para ler e gravar um arquivo usando JavaScript?


2
Por que você precisa disso? Talvez haja soluções alternativas.
Ionuţ G. Stan


1
foi feita muitas vezes antes na verdade
annakata

1
Encontrei este recurso em relação ao armazenamento de arquivos do lado do cliente. html5rocks.com/en/tutorials/offline/storage Pelo que reuni, o HTML5 permite que o Websights armazene informações no disco rígido local do usuário, mas em uma mansão mais parecida com um banco de dados. O navegador gerencia o armazenamento de arquivos e impõe certos limites para impedir que a World Wide Web carregue os discos rígidos das pessoas até a borda. Ainda não são completamente à prova de idiotas, mas estão sendo aprimorados, pelo menos de acordo com este artigo. Tenha uma leitura para obter detalhes.
28516 Garrett #

2
Use o Ajax e com o PHP manipule arquivos de leitura e gravação. Se você deseja lidar com a gravação em arquivos do lado do cliente, esqueça. Exigiria que muitas opções de segurança fossem desabilitadas no servidor e você ficaria com um site extremamente inseguro. Se você não quiser usar o PHP, talvez o que você deseja alcançar possa ser feito usando os cookies JavaScript para armazenar dados no computador do cliente.
Dan Bray

Respostas:


64

Por questões de integridade, o OP não declara que ele está procurando fazer isso em um navegador (se ele estiver, como foi afirmado, geralmente não é possível)

No entanto, o javascript em si permite isso; isso pode ser feito com o javascript do lado do servidor.

Consulte esta documentação na classe Javascript File

Edit : Esse link era para os documentos da Sun que agora foram movidos pela Oracle.

Para acompanhar os horários, veja a documentação do node.js da classe FileSystem: http://nodejs.org/docs/latest/api/fs.html

Editar (2) : agora você pode ler arquivos do lado do cliente com HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/


3
É possível gravar em arquivos locais usando HTML5 também?
Anderson Green

1
Além disso, dependendo da sua situação, você pode fazer uma chamada ajax para um script php e despejar os dados dessa maneira. Isso foi útil na minha situação em que eu queria armazenar alguns dados gerados no lado do javascript, mas não importava como chegavam lá.
precisa saber é o seguinte

1
@DustinGraham, Atualmente, com as APIs do Chrome, podemos gravar arquivos no lado do cliente via JavaScript, certo?
Pacerier 26/06

40

Não. O javascript do navegador não tem permissão para gravar na máquina cliente sem que muitas opções de segurança tenham que ser desativadas


44
@marcgg: Isso torna essa resposta incompleta, não incorreta. E, vamos enfrentá-lo, é altamente provável que esta resposta não cobrir caso de uso do OP.
Corridas de leveza em órbita

36
Se o OP estava planejando usar javascript fora do navegador, isso é incomum o suficiente para que eles provavelmente o tenham mencionado. Não é irracional (e definitivamente não é incorreto) assumir um navegador. +1 (para compensar o -1 de marcgg).
Michael Martin-Smucker

2
@LightnessRacesinOrbit O botão downvote não significa que a resposta está incorreta. O texto da dica de ferramenta é This answer is not useful.
Scruffy

1
@ Mike - Não foi quando essa resposta foi escrita, e ainda é razoável assumir JS do lado do navegador por padrão.
Quentin

16

O futuro está aqui! As propostas estão mais próximas da conclusão, sem mais ActiveX, flash ou java. Agora podemos usar:

Você pode usar o Arrastar / Soltar para colocar o arquivo no navegador ou um simples controle de upload. Depois que o usuário selecionar um arquivo, você poderá lê-lo com Javascript: http://www.html5rocks.com/en/tutorials/file/dndfiles/


Os links estão quebrados agora.
Prometheus

Os links estão quebrados novamente, ambos são o mesmo link, mas com significados diferentes. Quebrados.
dentro de

@insidesin fixed
Thomas Shields

14

aqui está a proposta do mozilla

http://www-archive.mozilla.org/js/js-file-object.html

isso é implementado com uma opção de compilação no spidermonkey e também no extendscript da adobe. Além disso (eu acho), você obtém o objeto File nas extensões do Firefox.

O rhino possui uma função readFile (bastante rudimentar) https://developer.mozilla.org/en/Rhino_Shell

para operações de arquivo mais complexas no rhino, você pode usar os métodos java.io.File.

você não receberá nada disso no navegador. Para funcionalidades semelhantes em um navegador, você pode usar as funções de banco de dados SQL do HTML5, persistência do cliente, cookies e objetos de armazenamento flash.


12

Essa função Javascript apresenta uma caixa de diálogo "Salvar como" completa para o usuário que executa isso no navegador. O usuário pressiona OK e o arquivo é salvo.

Editar: O código a seguir funciona apenas com o navegador IE, uma vez que o Firefox e o Chrome consideraram esse código um problema de segurança e o impediram de funcionar.

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

Invoque a função:

save_content_to_file("Hello", "C:\\test");

1
ir = createElement ('iframe'); - iframe é o ID do iFrame.
Temp

Além disso, ele irá funcionar em todos os sistemas operacionais (desde que um local de arquivo válido é escolhido?)
Anderson Verde

4
Esta é uma boa solução, mas funciona apenas com o IE? Eu tentei IE e FF e com FF não funciona.
u.gen

9

Se você estiver usando JScript (Javascript da Microsoft) para executar scripts locais usando o WSH (NÃO em um navegador!), Poderá usar Scripting.FileSystemObjectpara acessar o sistema de arquivos.

Acho que você pode acessar o mesmo objeto no IE se desativar muitas configurações de segurança, mas isso seria uma idéia muito, muito ruim.

MSDN aqui


Eu queria fazer isso em um htaaplicativo e isso resolve-lo
chiliNUT

8

Atualmente, os arquivos podem ser gravados e lidos a partir do contexto de uma guia / janela do navegador com as APIs File , FileWriter e FileSystem , embora haja advertências quanto ao seu uso (consulte o final desta resposta).

Mas para responder sua pergunta:

Usando o BakedGoods *

Gravar arquivo:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Leia o arquivo:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Usando as APIs File, FileWriter e FileSystem brutas

Gravar arquivo:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Leia o arquivo:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Apenas o que você pediu certo? Talvez talvez não. As duas últimas APIs:

  • No momento, são implementados apenas em navegadores baseados no Chromium (Chrome e Opera)
  • Foram retirados da faixa de padrões do W3C e, a partir de agora, são APIs proprietárias
  • Pode ser removido dos navegadores de implementação no futuro
  • Restrinja a criação de arquivos a uma caixa de proteção (um local fora do qual os arquivos não produzem efeito) no disco

Além disso, a especificação FileSystem não define diretrizes sobre como as estruturas de diretórios devem aparecer no disco. Em navegadores baseados no Chromium, por exemplo, a sandbox possui um sistema de arquivos virtual (uma estrutura de diretórios que não existe necessariamente no disco da mesma forma que quando acessada pelo navegador), dentro do qual os diretórios e arquivos criados com o APIs são colocadas.

Portanto, embora você possa gravar arquivos em um sistema com as APIs, localizá-los sem as APIs (bem, sem a API FileSystem) pode ser um assunto não trivial.

Se você pode lidar com esses problemas / limitações, essas APIs são praticamente a única maneira nativa de fazer o que você pediu.

Se você estiver aberto a soluções não nativas, o Silverlight também permitirá a entrada / saída de arquivos em um concurso de guias / janelas por meio do IsolatedStorage . No entanto, é necessário código gerenciado para utilizar esse recurso; uma solução que exige a escrita desse código está além do escopo desta pergunta.

Obviamente, uma solução que utiliza código gerenciado complementar, deixando um com apenas Javascript para escrever, está bem dentro do escopo desta pergunta;):

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods é uma biblioteca Javascript que estabelece uma interface uniforme que pode ser usada para realizar operações comuns de armazenamento em todos os recursos de armazenamento nativos e alguns não-nativos. É mantido por esse cara aqui:).



5

No contexto do navegador, o Javascript pode ler o arquivo especificado pelo usuário. Consulte o blog de Eric Bidelman para obter detalhes sobre a leitura de arquivos usando a API de arquivos. No entanto, não é possível que o Javascript baseado em navegador escreva o sistema de arquivos do computador local sem desativar algumas configurações de segurança, pois é considerado uma ameaça à segurança de qualquer site alterar arbitrariamente o sistema de arquivos local.

Dizendo isso, existem algumas maneiras de contornar isso, dependendo do que você está tentando fazer:

  1. Se for o seu próprio site, você pode incorporar um Java Applet na página da web. No entanto, o visitante precisa instalar o Java na máquina local e será alertado sobre o risco à segurança. O visitante deve permitir que o applet seja carregado. Um Java Applet é como um software executável que possui acesso completo ao computador local.

  2. O Chrome suporta um sistema de arquivos que é uma parte da área restrita do sistema de arquivos local. Veja esta página para detalhes. Isso permite que você salve temporariamente as coisas localmente. No entanto, isso não é suportado por outros navegadores.

  3. Se você não está limitado ao navegador, o Node.js possui uma interface completa do sistema de arquivos. Veja aqui a documentação do sistema de arquivos . Observe que o Node.js pode ser executado não apenas em servidores, mas também em qualquer computador cliente, incluindo o Windows. O corredor de teste javascript Karma é baseado em Node.js. Se você gosta de programar em javascript no computador local, esta é uma opção.


3

Para criar arquivo, tente

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Crie seu diretório na unidade C porque o Windows possui segurança contra gravação na Web, por exemplo, crie uma pasta chamada "tmp" na unidade C.


2

Você terá que recorrer ao Flash, Java ou Silverlight. No caso do Silverlight, você verá o armazenamento isolado . Isso fará com que você grave arquivos no seu próprio playground no disco do usuário. Porém, não permitirá que você escreva fora do seu playground.


1

Você não pode fazer isso de maneira cruzada no navegador. O IE possui métodos para permitir que aplicativos "confiáveis" usem objetos ActiveX para ler / gravar arquivos, mas infelizmente é isso.

Se você deseja salvar as informações do usuário, provavelmente precisará usar cookies.


4
E a barreira para se tornar um aplicativo "confiável" é o que exatamente? Um diálogo de confirmação?
Breton

@ Philip, Ninguém disse que precisa ser cross browser. Uma solução diferente para cada navegador é adequada.
Pacerier 26/06

1

Em um teste ReactJS, o seguinte código grava um arquivo com êxito:

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

O arquivo é gravado no diretório que contém os testes, portanto, a gravação em um arquivo JSON real '* .json' cria um loop!


0

Você não pode executar a E / S de arquivos no lado do cliente usando javascript, pois isso seria um risco à segurança. Você teria que fazer o download e executar um exe ou, se o arquivo estiver no seu servidor, use AJAX e uma linguagem do lado do servidor, como PHP, para fazer a E / S no lado do servidor


1
Isso não fornece uma resposta para a pergunta. Para criticar ou solicitar esclarecimentos a um autor, deixe um comentário abaixo da postagem.
Harpun

@harpun, exatamente. Exclua esta resposta e converta-a em um comentário.
Pacerier 26/06

0

Existem duas maneiras de ler e gravar um arquivo usando JavaScript

  1. Usando extensões JavaScript

  2. Usando uma página da Web e objetos do Active X


-1

Aqui está a solução de gravação para o Chrome v52 + (o usuário ainda precisa selecionar uma corça de destino ...)
source: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>
const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

Mais adequado para gravar grandes dados gerados no lado do cliente.
Caso contrário, sugiro usar o FileSaver.js para salvar Blob / Files

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.