[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
