Angular 14 JSZip & FileSaver.js Example to Download & Compress Multiple Files into a ZIP File in TypeScript

 

 

Welcome folks today in this blog post we will be compressing multiple files into a single zip fie and download it inside the browser as an attachment in angular 14 using typescript using jszip and filesaver.js library. All the full source code of the application is shown below.

 

 

Get Started

 

 

First of all guys we need to initialize a new angular 14 project using the below command

 

 

ng new angularapp

 

 

cd angularapp

 

 

And now we need to install dependencies for the angular project using the below command as shown below

 

 

npm i jszip

 

 

npm i file-saver

 

 

And after installing this library you need to go to app.component.html file and copy paste the html code which is required for this application

 

 

app.component.html

 

 

 

 

As you can see we have the button to download the zip file as an attachment and we have attached the onclick event listener which is a method which is called downloadZip() which lets the user to download the zip files

 

 

Now we need to define this function inside the app.component.ts file of your angular project. First of all we will be importing both the libraries that we installed earlier as shown below

 

 

app.component.ts

 

 

 

 

As you can see we are using the import statement to import the jszip and also the filesaver.js library as well. And now we need to define the function

 

 

 

 

As you can see we are declaring an empty array variable where we are storing the base64 code of the pdf file which will be present inside the zip file which will be downloaded as an attachment. Inside the constructor we are appending the base64 code to the array. And now we need to define the function when we click the button

 

 

 

 

As you can see in the above function we are first of all initializing a new object of the JSZip class and then we are adding the file inside the zip compressed file. First of all we are adding the text file which holds the content or message which is hello world and secondly we are constructing a new reference of the base64 pdf document and then we are creating a new folder inside the zip file which is called pdfs and inside it we are storing the pdf file by looping through all the bytes which are there inside the base64 code. And then we are using the generateAsync() method to save the zip file as a blob in the browser and then to download it as an attachment we are using the fileSaver.js library and we are using the saveAs() function and here we are passing the actual content of the zip file and secondly we are passing the name of the zip file in the second argument.

 

Now if you run the angular app by running the below command as shown below

 

 

ng serve