Publicado em por Paulo Künzel

FileSaver: Salve arquivos com JavaScript

 

[download id=”245″]

Este tutorial serve para quem precisa criar pequenos arquivos de texto e salva-los em um formato que o pc do usuário final possa ler. Para isso utilizaremos a biblioteca do FileSaver.js para eftuar a lógica de criação e baixar o arquivo na máquina cliente. Então vamos começar!

Passo 1

Baixe o script do FileSaver.min.js no link (https://github.com/eligrey/FileSaver.js/) ou junto com nosso código fonte acima e copie-o para o seu local de trabalho. Caso queira conhecer melhor o código, você pode baixar a versão não minificada, em qualquer outro caso não vale a pena.

Passo 2

Vamos criar alguns inputs html para que possamos salvar nossos dados. Precisaremos de um input para o nome do arquivo, um textarea para o texto do arquivo e um botão para iniciarmos a rotina.

<html>
<head>
   <style>
   div {
     min-width: 300px;
     width: 50%;
     margin: 10px auto;
   }
   input,
   textarea {
     width: 100%;
     min-width: 250px;
   }
   </style>
</head>
<body>
   <h3>Salvar arquivo com JavaScript</h3>
   <div>
     <label for="input-fileName">Nome do Arquivo</label><br/>
     <input type="text" id="titulo" placeholder="Nome do Arquivo">
   </div>
   <div>
     <label for="textarea">Texto</label><br/>
     <textarea id="texto" placeholder="Digite um texto para salva-lo"></textarea>
   </div>
   <div>
     <button onclick="salvar()">Salvar</button>
   </div>
</body>
</html>

Passo 3

O código acima já serve como uma base simples para implementarmos nosso código. Vamos adicionar, antes da tag de fechamento do body, a biblioteca do FileSaver e logo após colocaremos a seguinte função JavaScript.

  <!-- Biblioteca que adicionara o código -->
   <script type="text/javascript" src="FileSaver.min.js"></script>
   <!-- função ao clicar em salvar -->
   <script>
   function salvar() {
      let texto = document.getElementById("texto").value;
      let titulo = document.getElementById("titulo").value;
      let blob = new Blob([texto], { type: "text/plain;charset=utf-8" });
      saveAs(blob, titulo + ".txt");
   }
   </script>
</body>
</html>

Como função do FileSaver que cria o arquivo precisa de um objeto blob para definir a formatação além do texto do arquivo, criamos o objeto utilizando o valor obtido no textarea com id texto e definimos que será codificado em utf-8 (valor padrão para formatação de texto no Brasil).

Tendo feito isso, basta chamar a função saveAs(), passando como parâmetros o blob e o título concatenado com o formato desejado. Note que você pode colocar outros formatos (ex.: XML, CSV), mas terá que garantir que o conteúdo possa ser lido pelo sistema que o abrir.

Passo 4)

O passo final é o teste. Rode o código e preencha os campos de título e texto para ver se ao salvar o arquivo para download aparecerá na sua tela. Ele apareceu? Tem conteúdo dentro? Se a respostas das perguntas anteriores for sim, então parabéns, seu código está funcionando.

Possíveis problemas

É necessário observar que nem todos s navegadores onde ele será utilizado dão suporte ao Blob e também, se o título ou o texto não existirem, talvez seja necessário informar o usuário ou colocar valores padrões para o título ou texto

Conclusão

Como é possível ver, criar um arquivo de texto utilizando apenas o JavaScript é super fácil. Caso você leve em consideração os possíveis problemas, você poderá fazer uma ferramenta mais flexível e completa que permita ao seu usuário criar e editar pequenos arquivos de forma rápida e eficiente

5 respostas para “FileSaver: Salve arquivos com JavaScript”

  1. Uma dúvida, como salvaria um arquivo de imagem em formato JPG?
    Ex.: Consigo tirar uma foto de uma pessoa, como conseguiria pegar esta foto e salvar em um determinado lugar. “C:\Minhas Imagens do HTML\arquivo.jpg”

  2. Bom dia, queria saber se existe uma forma de num arquivo.js exista um codigo que criasse um arquivonovo.js com base de dados de um formulario. Ja pesquisei de todo forma e nao acho uma base para trabalhar em cima.

Deixe um comentário