How to download multiple image files in .zip folder using JSZip in Vue.js

Question

I am using Vue.js in a current project of mine and in that I need a feature, which will help any user to download pics that are available in the gallery.

There is an option that the user can select multiple images by clicking on the checkbox besides every image and to download the user needs to click a button to download all the pics that the user may have selected. The download will compress all the selected images to a zip folder and then the downloading stars and the user gets a final zip folder of all of the images that were selected.

To deliver this feature I have tried many Vue.js libraries but only JSZip was able to work for some extend. JSZip packed the images to a .zip and then downloads the zip folder but the images that are being packed, the type:"image/?" is also present but when one will open the file to see the image , then it gives an error of:

not an image of the defined type

in the image viewer. Here is the sample of the code that I have used:

export default {
  methods: {
    download_btn() {
      var zip = new JSZip()
      var img = zip.folder("images")
      for (i = 0; i < this.image.length; i++) {
        img.file("img.png", this.image[i].imageurl)
      }
      zip.generateAsync({
        type: "blob"
      }).then(function(content) {
        saveAs(content, "img_archive.zip")
      })
    }
  }
}

This code only saves one picture in the zip folder and also you can't open the image file.

Jaitsujin · Accepted Answer · 2018-12-20 02:08:20Z

1

Have a look at this one. Maybe it will help.

https://jsfiddle.net/jaitsujin/zrdgsjht/

You can manage zip folder structure by modifying this line

filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");

answered Dec 20, 2018 at 2:08

Jaitsujin

1411 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deadron · Accepted Answer · 2018-07-23 15:56:29Z

0

According to https://stuk.github.io/jszip/documentation/api_jszip/file_data.html the file method expects the image data as the second param to the call. It looks like you are passing the url of the image instead of the actual image bytes. If you refer to the docs you will see they retrieve the image via an ajax call.

answered Jul 23, 2018 at 15:56

Deadron

5,2891 gold badge18 silver badges28 bronze badges

3 Comments

RKD1996 Over a year ago

but even after i use the ajax call to get the actual image will that be saved as the type of image that is??

Deadron Over a year ago

It is unnecessary to specify the type. Assuming the image is valid and has the correct extension it will open properly.

RKD1996 Over a year ago

I have tries the method in the above mentioned link but still the same result with some minor results like now i am getting the image data but still it shows that not an image file when i try to open it

MagnetPlant · Accepted Answer · 2018-07-25 03:23:26Z

0

To save more than one image, try using the number in the filename. And you'll have to use the image data, not the url, just like Deadron said.

In the docs they use xhr within a promise, see https://stuk.github.io/jszip/documentation/examples/downloader.html

Instead of:

for (i = 0; i < this.image.length; i++) {
    img.file("img.png", this.image[i].imageurl)
}

Try:

for (i = 0; i < this.image.length; i++) {
    img.file("img" + i + ".png", /* image data */)
}

answered Jul 25, 2018 at 3:23

MagnetPlant

1961 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to download multiple image files in .zip folder using JSZip in Vue.js

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related