Como gerar arquivos .zip no react/node ! (em 2 passos)

Lidar com download e upload de arquivos sempre é uma tarefa desafiadora, ainda mais quando é necessário gerar mais de uma arquivo em uma única requisição. Para solucionar esse problema podemos usar o formato zip! Compactando todos os arquivos...

Marcos Henrique

3 min

Um breve resumo sobre o formato zip

O zip é um formato de arquivo que tem o objetivo de compactar dados, ou seja, é uma forma de agrupar vários arquivos e reduzir o espaço que ocupa.

Inclusive se você utiliza windows já deve o conhecer pelo programar winrar e sua licença infinita haha

meme by quickmeme.com

Sem mais delongas, vamos ao tutorial!

1 passo - baixando os pacotes

A biblioteca que vamos usar para esse tutorial se chama JSZip, com ela iremos criar nosso arquivo compactado! Se quiser conhecer mais do seus recursos é só clicar aqui.

Também usaremos a js-file-download para baixar esse zip gerado com mais facilidade.

Para instalar abra o terminal de sua preferência e rode o seguinte comando:


          
            yarn add jszip js-file-download
          
          
            // or
          
          
            npm install jszip js-file-download

2 passo - gerando arquivo!

Agora que temos a biblioteca instalada podemos importa-la no nosso código, se estiver usando react pode importar usando:


          
            import JSZip from 'jszip';
          
          
            import download from 'js-file-download';

Caso use node em sua versão sem suporte a import/export pode usar o require, como no exemplo abaixo:


          
            const JSZip = require('jszip');
          
          
            const download = require('js-file-download');

Após importar, acesse a função que vai ser responsável por gerar o arquivo e crie uma nova instância do jszip


          
            const zip = JSZip();

A partir de agora já temos todas as funções do jszip disponíveis para usar! Sendo assim vamos brincar um pouco com a ideia!

O comando zip.file é o responsável por adicionar arquivos novos ao nosso zip, basta passar para ele o nome do arquivo no primeiro parâmetro e os dados do arquivo em segundo, como no exemplo abaixo:


          
            zip.file('meu-arquivo.txt', 'hello world');

Agora que nosso arquivo zip está pronto, precisamos permitir que ele seja baixado! Para isso podemos usar o comando abaixo:


          
            zip.generateAsync({ type: 'blob' }).then(blobdata => {
          
          
            
          
          
             const zipblob = new Blob([blobdata]);
          
          
            
          
          
             download(zipblob, `meu.zip`);
          
          
             
          
          
            });

Prontinho! Após rodar esse código nosso um poppup para download já vai aparecer na sua tela! Muito massa né ?

com o jszip também é possível gerar arquivos de imagem, como gifs, png, jpg e até pdf além de permitir criar pastas para organizar melhor os arquivos dentro do zip!

Funções extras

com o jszip também é possível gerar arquivos de imagem, como gifs, png, jpg e até pdf além de permitir criar pastas para organizar melhor os arquivos dentro do zip!


          
            const pasta = zip.folder("pasta"); // criando uma pasta //


          
            pasta.file("arquivo.png", dadosDoArquivo, {base64: true}); // inserindo imagem na pasta

Curtiu esse tutorial? Se gostou não se esqueça de apertar no ping ao lado e se inscrever nesse canal para receber novos posts como esse diretamente na sua caixa de entrada!

Compartilhar conteúdo

Apoie o canal e aprenda algo novo em 2022!

Sua meta para 2022 é começar na programação e conseguir seu primeiro emprego ou até mesmo empreender ?Então tenho uma oportunidade para você! O curso dev web full stack do Igor Oliveira vai te mostrar do básico até os seus primeiros projetos em programação com exercícios e módulos especiais para te ensinar A GANHAR DINHEIRO mesmo no início da carreira! ACESSE POR AQUI e use o cupom "marcos" para garantir seu acesso com desconto! 🚀🚀

Semana do inglês para devs

Novo evento que vai acontecer do dia 04 a de 10 de julho de 2022! Totalmente gratuito e focado em programadores que querem aprender inglês para mudar de nível na carreira!

Quer conseguir uma oportunidade internacional? COMECE ESSA JORNADA POR AQUI

Seguir meu Canal

Learn

Support

More Options