Download multiple images as zip file using javascript in angular

General
1

I need to download a list of images using javascript in angular as a zip file… so my website is an shopping website…if we click on a product it will open allthe images related to it.This is same as we have in amazon and flipkart shopping websites. i had a button and when i click on the button i need to download all the images that are showing when clicked on the respective product. The problem I am facing is that there are no images in the downloaded file. here is the html part

<a class=“download” (click) = “download()” >

below is the .ts part and “this.Images” has all the image urls

download(){
let count = 0;
const zip = new JSZip();

this.Images.forEach((item) =>{
  this.fileName = this.getfileName(item);
  JSZipUtils.getBinaryContent(item, (err,data)=>{
    if(err){
      throw err;
    }
    console.log(data);    
    zip.folder("images").file(this.fileName,data,{base64: true});
    count++

    if(count === this.Images.length){
      zip.generateAsync({type:'blob'}).then((content)=>{
          fileSaver.saveAs(content, this.fileName);
      });
    }
  });
});
}

getfiileName() method is as below

getfileName(str){
return str.substring(str.lastIndexOf('/')+1);

}

Note : I dont want to use JSZipUtils in my code

2

To download a list of images as a ZIP file in an Angular application without using JSZipUtils, you can use the fetch API (or HttpClient in Angular) to retrieve the image binary data and add it to the ZIP archive using JSZip.

Here’s how you can modify your code to avoid JSZipUtils and achieve the functionality you’re aiming for:

Updated Code:

  1. Use HttpClient or fetch to get the image data.
  2. Use JSZip to add the image data to the ZIP file.

HTML Part:

<a class="download" (click)="download()">Download Images</a>

TypeScript Part:

import { Component } from '@angular/core';
import * as JSZip from 'jszip';
import { saveAs } from 'file-saver';
import { HttpClient } from '@angular/common/http';  // For using HttpClient

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

  Images: string[] = ['image_url_1', 'image_url_2', 'image_url_3']; // Array of image URLs

  constructor(private http: HttpClient) {}

  // Function to download images as a ZIP file
  download() {
    let count = 0;
    const zip = new JSZip();
    const zipFolder = zip.folder('images');  // Optional folder inside the ZIP

    this.Images.forEach((item) => {
      const fileName = this.getFileName(item);

      // Fetch image data using HttpClient (or you can use fetch)
      this.http.get(item, { responseType: 'arraybuffer' }).subscribe(
        (data) => {
          zipFolder.file(fileName, data);  // Add image to ZIP
          count++;

          // Once all images are processed, generate the ZIP file and trigger download
          if (count === this.Images.length) {
            zip.generateAsync({ type: 'blob' }).then((content) => {
              saveAs(content, 'images.zip');
            });
          }
        },
        (error) => {
          console.error('Error fetching image', error);
        }
      );
    });
  }

  // Extract the filename from URL
  getFileName(str: string): string {
    return str.substring(str.lastIndexOf('/') + 1);
  }
}

Explanation:

  1. HttpClient.get: The HttpClient service is used to fetch the image data as an array buffer (responseType: 'arraybuffer'), which allows you to handle the binary data of images.
  2. JSZip: The JSZip library is used to create the ZIP file and add the images to it. Each image is added to the images folder inside the ZIP.
  3. fileSaver.saveAs: After the images are added to the ZIP, the saveAs function from the file-saver library is used to trigger the download of the generated ZIP file.
  4. Handling Multiple Images: The count variable tracks how many images have been processed. Once all images are processed, the ZIP file is generated and downloaded.

Notes:

  • HttpClient: If you’re using Angular, HttpClient is the recommended way to make HTTP requests. It supports the response type arraybuffer, which is useful for binary data like images.
  • JSZip: The JSZip library is used to create the ZIP file and store all the images. You don’t need JSZipUtils to get the binary content when using HttpClient.
  • file-saver: Ensure that the file-saver package is installed and imported to trigger the download (npm install file-saver).

Conclusion:

This approach eliminates the need for JSZipUtils and uses Angular’s HttpClient to fetch the image binary data. It efficiently adds the images to a ZIP archive and triggers the download.