Download Files In ZIP Format In Angular 9

In this article, we will learn how to download multiple files in ZIP format in Angular 9.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new download-zip

Now, open the newly created project and execute the commands given below.

npm install jszip
npm install file-saver

jszip

jszip is a javascript library used to create, read, and edit .zip files.

file-saver

file-saver is a javascript library used to save files on the client-side.

Open the app.module.ts file and add the code in it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.html file and add the code in it.

<textarea [(ngModel)]='title' name="title" rows="5" cols="50"></textarea>
<hr>
<input type="file" (change)="handleFileInput($event.target.files)" multiple>
<button (click)="download()">Download</button>

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';
import * as JSZip from 'jszip';
import * as FileSaver from 'file-saver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title;
  uploadFiles;

  handleFileInput(files) {
    this.uploadFiles = files;
  }

  download() {
    var zip = new JSZip();
    zip.file("Title.txt", this.title);
    var imgFolder = zip.folder("images");
    for (let i = 0; i < this.uploadFiles?.length; i++) {
      imgFolder.file(this.uploadFiles[i].name, this.uploadFiles[i], { base64: true });
    }
    zip.generateAsync({ type: "blob" })
      .then(function (content) {
        FileSaver.saveAs(content, "Sample.zip");
      });
  }
}

In the above example, it will create a zip named ‘Sample.zip‘. With one text file named ‘Title.txt‘ and one folder named ‘images‘ which may contain images uploaded by the user.

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

On a dedicated, hourly, or full-time basis, you may hire Angular developers in India with an average of 5+ years of expertise who stay up to speed with the newest versions and ensure that you will get top-rated customized web apps. Over the years, our Angular offshore programmers have successfully performed a variety of Angular development projects. Our services are focused on utilizing the most up-to-date web frameworks to construct Angular-based, scalable solutions for our diverse clientele.

Also, check Datepicker In Angular 9