Como criar um arquivo e salvar em JavaScript

Neste artigo você vai aprender a como criar um arquivo e salvar em JavaScript, vamos utilizar apenas recursos base da linguagem

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Neste artigo vamos utilizar uma versão melhorada de um famoso snippet da internet

Nele vamos criar uma função que recebe três argumentos:

• Dados do arquivo;
• Nome do arquivo;
• Tipo do arquivo;

Dentro da função temos a criação do arquivo em Blob, e realizamos uma ação para fazer o download dele

Em navegadores mais antigos criamos uma tag a apenas para o download

Já nos mais modernos temos acesso ao método msSaveOrOpenBlob, que faz para nós o trabalho sujo e torna mais simples esta ação

Veja o exemplo de código:

function download(data, filename, type) {
    const file = new Blob([data], {type: type});
    
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(file, filename);
        return
    }
    
    const a = document.createElement("a");
    const url = URL.createObjectURL(file);
        
    a.href = url;
    a.download = filename;
    
    document.body.appendChild(a);
    
    a.click();
    
    setTimeout(function() {
       document.body.removeChild(a);
       window.URL.revokeObjectURL(url);  
    },0); 
}

Em navegadores mais modernos acessamos o que está no if, e nos antigos o restante do código é executado

Note que a tag a também é excluída do documento após a operação

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como criar um arquivo e salvar em JavaScript

Utilizamos uma estratégia que também funciona em navegadores antigos

Nossa função cria um novo arquivo, onde definimos: conteúdo, nome e tipo

E depois faz o download do mesmo, de forma imediata

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

O que é o Blob?

Antes de sair copiando o código, vale entender a peça central dele

Blob é um objeto do próprio JavaScript que representa dados brutos, tipo um pacotinho de conteúdo que o navegador entende como arquivo

É ele que transforma o teu texto, JSON ou CSV em algo que dá pra baixar

Repara que passamos o tipo (type) na criação, é isso que diz pro navegador se aquilo é texto puro, JSON e por aí vai

Entendeu o Blob, o resto do código fica bem mais fácil de ler

Salvando diferentes tipos de arquivo:

A mesma função serve pra vários formatos, muda só o que tu passa nos argumentos

Bora ver na prática?

Arquivo de texto (.txt):

download("Meu conteúdo de texto", "arquivo.txt", "text/plain")

Arquivo JSON (.json):

const dados = { nome: "Matheus", curso: "JavaScript" } download(JSON.stringify(dados), "dados.json", "application/json")

Arquivo CSV (.csv):

const csv = "nome,idade\nMatheus,30\nJoao,25" download(csv, "planilha.csv", "text/csv")

Repara que pro JSON usamos JSON.stringify pra virar texto antes de salvar

Perguntas frequentes:

Dá pra criar arquivo em JavaScript sem biblioteca?

Sim, e é exatamente o que fizemos aqui

Usamos só recursos base da linguagem (Blob, createElement e a URL do objeto), nada de instalar pacote

Como salvar o arquivo automaticamente ao clicar num botão?

É só chamar a função download dentro do evento de clique do botão

Algo tipo botao.addEventListener("click", () => download("texto", "nota.txt", "text/plain"))

E no Node.js, funciona igual?

Não

Esse código é pro navegador, que tem acesso ao document e ao download

No Node.js tu salvaria com o módulo fs (File System), que é outra história

Um cuidado com o nome do arquivo:

Já me ferrei com isso, então fica a dica

Sempre passe a extensão certa no nome (.txt, .json, .csv)

Se esquecer a extensão, o arquivo baixa, mas o sistema não sabe abrir direito e o usuário fica perdido