Como salvar um arquivo com JavaScript

JavaScript é uma das linguagens de programação mais populares, principalmente porque lida com o front-end de sites enquanto é executado dentro de um navegador. Com os avanços nos padrões da web, temos usado cada vez mais para realizar mais e mais tarefas que antes eram muito difíceis ou impossíveis de fazer apenas com JavaScript.

Neste tutorial, você aprenderá como criar e salvar arquivos com JavaScript. Vamos discutir três técnicas diferentes que você pode usar para fazer isso.

Usando URLs de dados para salvar arquivos

A maneira mais fácil de salvar um arquivo é usar URLs de dados que incluam todas as informações relevantes. Esses URLs de dados são URLs especiais prefixados com o data: esquema. Eles são ideais para incorporar pequenos arquivos em seus documentos HTML. Esses URLs seguem a seguinte sintaxe:

data:[][;base64],

o mediatype token é na verdade um tipo MIME que especifica a natureza e o formato de um documento ou arquivo. Seu valor padrão é text/plain;charset=US-ASCII. o base64 token é opcional e necessário apenas quando você deseja armazenar dados binários textualmente. Especificamos nossos dados reais após todos esses tokens.

Podemos usar o download atributo para especificar o nome do arquivo onde queremos colocar todo o nosso conteúdo após o download. Aqui está um exemplo de uso de todos esses atributos juntos:

Download Text File with Name

JavaScript pode ser muito útil quando você quer tornar tudo dinâmico. Aqui está um exemplo:

const link = document.querySelector('a.dynamic');

let name="Monty";
let text = `My name in ${name}.

I love writing tutorials.`;

link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
link.setAttribute('download', `${name.toLowerCase()}.txt`);

Começamos selecionando nosso link usando o querySelector() e, em seguida, crie um monte de variáveis ​​para armazenar o nome do arquivo e seu conteúdo. O uso de literais de modelo nos permite trabalhar facilmente com strings de várias linhas.

Criamos nosso URL de dados concatenando os metadados com o conteúdo real codificado usando o encodeURIComponent() função. A demonstração do CodePen a seguir mostra esse método de salvar arquivos de texto usando JavaScript.

Usando Blobs para criar e salvar arquivos

Blobs são objetos semelhantes a arquivos em JavaScript que contêm dados brutos. Esses dados brutos podem ser lidos como texto ou como dados binários. Neste tutorial, usaremos blobs para criar e salvar arquivos em JavaScript.

Podemos criar nossos próprios blobs usando o Blob() construtor que aceita uma matriz de objetos específicos para serem colocados dentro do blob. Você pode passar o tipo MIME dos dados como par chave-valor em um objeto que é o segundo parâmetro do Blob() construtor. É uma string vazia por padrão.

Poderíamos modificar o último exemplo em nossa seção anterior para usar blobs com o seguinte código JavaScript:

const link = document.querySelector('a.simple');

let name="Monty";
let text = `My name in ${name}.

I love writing tutorials.`;

var textBlob = new Blob([text], {type: 'text/plain'});

link.setAttribute('href', URL.createObjectURL(textBlob));
link.setAttribute('download', `${name.toLowerCase()}.txt`);

Nós criamos nosso textBlob chamando o Blob() construtor e passando nosso text variável para ele como um elemento de matriz. Depois disso, simplesmente definimos o valor de href e download atributos. A URL neste caso é criada chamando o createObjectURL() função que retorna uma string que contém a URL do objeto que passamos para ela.

Vamos dar um passo adiante e criar um blob onde o texto é obtido dinamicamente de um textarea elemento na página da web. Você poderá escrever o que quiser no textarea e depois clique no Salvar Arquivo botão para salvá-lo como um arquivo.

const saveBtn = document.querySelector('button.save-file');
let name="Monty";

saveBtn.addEventListener('click', function(){
  
  var tempLink = document.createElement("a");
  let textArea = document.querySelector("textarea");
  var taBlob = new Blob([textArea.value], {type: 'text/plain'});

  tempLink.setAttribute('href', URL.createObjectURL(taBlob));
  tempLink.setAttribute('download', `${name.toLowerCase()}.txt`);
  tempLink.click();
  
  URL.revokeObjectURL(tempLink.href);
});

Começamos obtendo uma referência ao nosso botão e, em seguida, ouvindo seus eventos de clique. Uma vez que o botão é clicado, obtemos o valor do nosso textarea elemento e convertê-lo em um blob. Depois disso, criamos um URL que faz referência ao nosso blob e o atribuímos ao href atributo da marca âncora que criamos.

Você pode experimentá-lo na seguinte demonstração do CodePen. Como exercício, tente modificar o código para que salve o arquivo com um nome digitado pelos usuários ao invés de algo estático.

Como salvar arquivo em uma pasta específica usando JavaScript?

Vamos começar tirando essa questão do nosso caminho primeiro. Resumindo, não é possível escolher arbitrariamente o diretório onde um arquivo é salvo em JavaScript. Apenas o usuário tem controle sobre o local onde um arquivo é salvo.

A razão pela qual um desenvolvedor web não tem permissão para ter controle total sobre o local onde um arquivo é salvo pelo navegador tem a ver com segurança. A internet seria muito menos segura se todos os sites tivessem acesso ao sistema de arquivos do seu dispositivo. Eles podem simplesmente injetar código malicioso em seu sistema ou visualizar informações privadas.

Anteriormente, não era possível salvar um arquivo em qualquer lugar, exceto na pasta de download padrão, que era ditada pela configuração do navegador e não por sites individuais. No entanto, a API de acesso ao sistema de arquivos permite que os desenvolvedores sugiram onde um arquivo pode ser salvo após receberem acesso do usuário. Tenha em mente que o suporte mais amplo do navegador está faltando atualmente para a API e os navegadores que o suportam o fazem apenas parcialmente.

Vamos modificar nosso último exemplo da seção anterior para criar e salvar um arquivo em JavaScript com a API de acesso ao sistema de arquivos.

const saveBtn = document.querySelector('button.save-file');
let name="Monty";

saveBtn.addEventListener('click', async function(){
  
  let textArea = document.querySelector("textarea");
  var taBlob = new Blob([textArea.value], {type: 'text/plain'});
  
  const pickerOptions = {
    suggestedName: `${name.toLowerCase()}.txt`,
    types: [
      {
        description: 'Simple Text File',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };

  const fileHandle = await window.showSaveFilePicker(pickerOptions);

  const writableFileStream = await fileHandle.createWritable();

  await writableFileStream.write(taBlob);

  await writableFileStream.close();
});

Como de costume, começamos criando um blob do text dentro de textarea elemento. Criamos um objeto que contém diferentes opções para nosso seletor de arquivos que aparece quando chamamos o showFilePicker() método. Podemos sugerir um nome para salvar o arquivo aqui e também passar uma matriz de tipos de arquivo permitidos para salvar. Este método retorna um FileSystemFileHandle em que podemos chamar o createWritable() método.

o createWritable() cria um fluxo gravável e escrevemos o blob que criamos anteriormente para esse fluxo. Por fim, fechamos nosso fluxo gravável. Neste ponto, o conteúdo do fluxo é salvo no arquivo.

Tente escrever algo no textarea do seguinte CodePen e, em seguida, clique no botão Salvar Arquivo botão. A demonstração não funcionará no Firefox, então você deve tentar usar o Chrome ou o Edge.

Pensamentos finais

Neste tutorial, aprendemos três técnicas diferentes para criar e salvar arquivos em JavaScript. As duas primeiras técnicas exigem que criemos tags âncora e atribuamos valores aos seus href e download atributos. A última técnica envolve o uso da API de acesso ao sistema de arquivos e nos dá melhor controle sobre diferentes aspectos do processo, como alterar o local de download padrão com a permissão do usuário. No entanto, atualmente não possui suporte significativo ao navegador para ser usado em projetos reais.