noelvo/download-multiple-files.js

ramuchintha · 2016-12-12T07:25:14Z

Hi,

I tried with the above script, every thing went fine, it is zipping the three files in to one zip. But i can see the last file content is adding to the zip three times.Means when the download the zip file i can see the same "http://image-url-3" three times inside the zip, instead of "http://image-url-1", http://image-url-2, http://image-url-3

Can you please help me to resolve this issue?

ramuchintha · 2016-12-12T09:12:29Z

Hi noelvo,

I tried the above script but i'm getting the same file content for both files, i mean when i tried to zip the two files from server, it is zipping two files but i'm getting the same content in both the files . Below is my code.

var zip = new JSZip();
var count = 0;

for(var url=0;url<msmSystemDownloadUrls.length;url++)
{
var filename = ccmFileNames[url];
console.log(msmSystemDownloadUrls[url]);
JSZipUtils.getBinaryContent(msmSystemDownloadUrls[url], function (err, data) {
if(err) {
throw err; // or handle the error
}
//zip.file(filename, data, {binary:true});
for(var fl=0;fl<ccmFileNames.length;fl++){
zip.file(ccmFileNames[fl], data, {binary:true});
}

 count++;
 if (count == msmSystemDownloadUrls.length) {
   zip.generateAsync({type:'blob'}).then(function(content) {
	  saveAs(content, "ramaSystemReport.mrep");
	  msmSystemDownloadUrls = [];
	  ccmFileNames= [];
   });
 }

});
}

I'm calling this function by using ajax .

Can you please help me to resolve this issue ASAP?

Waiting for your kind reply.

lmartinez99 · 2017-05-05T14:42:19Z

version 3
http://github.com/Stuk/jszip/zipball/master
https://stuk.github.io/jszip/
https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.min.js

<script type="text/javascript" src="js/FileSaver.min.js"></script>
<script src="js/jszip.min.js" type="text/javascript">  </script>

var urls = [
                 "images/20170420_145140.jpg", 
                 "images/20170503_142841.jpg", 
                 "images/20170503_084035.jpg", 
                 "images/20170503_163354.jpg", 
                 "images/20170503_163334.jpg", 
                 "images/20170421_114806.jpg"];
var nombre = "Zip_img";
//The function is called
compressed_img(urls,nombre);

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = nombre+".zip";
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if(err) {
         throw err; 
      }
       zip.file(url, data,  {binary:true});
       count++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}

RAJASRINU · 2017-06-12T06:17:25Z

Hi Ramuchnadra,

You can handle the incremental zip file generation with below changes

var zip = new JSZip();
var count = 0;
var count1 =0;
var zipFilename = "zipFilename.zip";
var urls = [
'http://image-url-1',
'http://image-url-2',
'http://image-url-3'
];

urls.forEach(function(url){
var filename = "filename";
// loading a file and add it in a zip file
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
throw err; // or handle the error
}
zip.file(filename, data, {binary:true});
count++;
if (count == urls.length) {
zip.generateAsync({type:'blob'}).then(function(content) {
**count1++;

  if(count1 == urls.length)**

saveAs(content, zipFilename);
});
}
});
});

Thanks & Regards,
V Rajesh
9884468991

srinivasulu538034 · 2017-06-21T08:26:23Z

Using Angular 2 :

I have installed the jzip-utils using the npm command
npm install jszip-utils
When trying to include the reference in ***.ts file, i am getting a message Cannot find module 'jszip-utils'
When observed the folder "node_modules", new folder 'jszip-utils' created with the required files

Any guidance will be great helpful.

Regards,
Srinivas

kinjalhinguss · 2018-10-29T07:12:38Z

Doesn't work with firefox 63.
File is downloaded, but it's file type is 'File'. and i cannot open it.

Please guide me on this.

Regards,
Kinjal

rahgurung · 2018-12-29T16:58:30Z

don't forget to make the filename vary with each iteration using index and add the extension . for example i added .jpg for images. :)

anuragteapot · 2018-12-31T10:14:14Z

Axios Version

      Your file object
       const payload = {};		
        var zip = new jsZip();
	var count = 0;
	payload.forEach((file) => {
		axios
			.get(file.filePath, {
				responseType: 'blob'
			}, )
			.then((response) => {

				zip.file(file.name, response.data, {
					binary: true
				});

				++count;

				if (count == payload.length) {

					zip.generateAsync({
						type: 'blob'
					}).then(function (content) {
						FileSaver.saveAs(content, new Date + '.zip');
					});
				}

			})
			.catch((error) => {
				console.log(error);
			});

karnadii · 2019-04-13T17:05:10Z

got it working, thanks to Anu1601CS

downloadChapter() {
      var zip = new JSZip();
      var count = 0;
      this.pages.forEach(file => {
        Axios
          .get(file, {
            responseType: "blob"
          })
          .then(response => {
            zip.file(count+".jpg", response.data, {
              binary: true
            });

            ++count;

            if (count == this.pages.length) {
              zip
                .generateAsync({
                  type: "blob"
                })
                .then(function(content) {
                  saveAs(content, new Date() + ".zip");
                });
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    },

iabdulazeem · 2019-09-13T07:57:16Z

Using Angular 2 :

1. I have installed the jzip-utils using the npm command
   npm install jszip-utils

2. When trying to include the reference in ***.ts file, i am getting a message  Cannot find module 'jszip-utils'

3. When observed the folder "node_modules", new folder 'jszip-utils' created with the required files

Any guidance will be great helpful.

Regards,
Srinivas

you have to import those npm libraries as following:
import { saveAs } from 'file-saver'
import * as JSZip from 'jszip'
import * as JSZipUtils from 'jszip-utils'

Revthy · 2019-11-08T12:33:25Z

Using Angular 2 :
1. I have installed the jzip-utils using the npm command
   npm install jszip-utils

2. When trying to include the reference in ***.ts file, i am getting a message  Cannot find module 'jszip-utils'

3. When observed the folder "node_modules", new folder 'jszip-utils' created with the required files
Any guidance will be great helpful.
Regards,
Srinivas
you have to import those npm libraries as following:
import { saveAs } from 'file-saver'
import * as JSZip from 'jszip'
import * as JSZipUtils from 'jszip-utils'

You saved my time @azsidhu Thank You...

varun-singh-01 · 2019-11-10T15:13:13Z

But what about downloading files of size 5 GB , 10 GB etc. When I tried this examples, it actually reads all fiiles and writes to a zip. I am looking for a solution where a user should see a zip download happening immediately after download request

Hussain-Safwan · 2020-02-18T12:28:17Z

I don't have actual files, but have text data (on database) and want to download the text data as files. Can I modify this method, somehow?

modbender · 2020-03-03T15:01:08Z

How to solve CORS No 'Access-Control-Allow-Origin' for getBinaryContent? @noelvo

soulinmaikadua · 2020-03-10T12:09:00Z

const Image = [
   "https://pngimage.net/wp-content/uploads/2018/06/react-icon-png-7.png",
   "https://cdn4.iconfinder.com/data/icons/logos-3/426/react_js-512.png",
   "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-512.png"
 ];


let count = 0;
    Image.forEach(function(url) {
      JSZipUtils.getBinaryContent(url, function(err, data) {
        if (err) {
          throw err;
        }
        zip.file(url, data, { binary: true });
        count++;
        if (count == Image.length) {
          zip.generateAsync({ type: "blob" }).then(function(content) {
            saveAs(content, "Image.zip");
          });
        }
      });

I try with this but it doesn't work

zeroonedev01 · 2020-06-25T15:43:59Z

How to solve CORS No 'Access-Control-Allow-Origin' for getBinaryContent on nextjs?

Arunwahatule85 · 2020-06-27T08:23:02Z

Below is code in which i am creating data for csv file and downloading csv file in zip folder:

generateCSVfiles()
{

      this.service.getStudentDetails(studentid, student.name).subscribe
          (res => {
            var dataSet = (res);
            // start
            if (studentid == "Senior") {
             
              const header = ["studentId","StudentName"];
              const replacer = (key, values) => values === null ? '' : values // specify how you want to handle null values here
              this.seniordata = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
              this.seniordata.unshift(header.join(','));
              this.seniordata = this.seniordata.join('\r\n');
            }
            else if (studentid == "Junior") {
               const header = ["studentId","StudentName"];
              const replacer = (key, values) => values === null ? '' : values // specify how you want to handle null values here
              this.juniordata = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
              this.juniordata.unshift(header.join(','));
              this.juniordata = this.juniordata.join('\r\n');
               
            }
        this.downloadzip();
   }
}
   





public downloadzip()
{
	
	 let zip = new JSZip();
      // Fill CSV variable
      zip.file( 'Studentrecord'+'.csv', this.juniordata);
	  zip.file( 'Studentrecord'+'.csv', this.seniordata);
    
    zip.generateAsync({
      type: "base64"
    }).then(function (content) {
      window.location.href = "data:application/zip;base64," + content ;
    });

}

Above code working fine and able to download csv file inside zip folder when we got response data for one of junior or Senior student. but when we received both junior and senior data at time then it downloading different zip file or sometimes only one zip file getting generated. but i want both file in one zip folder. can someone guide me how to download different csv file in one zip folder.

Kampadais · 2020-07-22T08:08:02Z

version 3
http://github.com/Stuk/jszip/zipball/master
https://stuk.github.io/jszip/
https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.min.js

<script type="text/javascript" src="js/FileSaver.min.js"></script>
<script src="js/jszip.min.js" type="text/javascript">  </script>

var urls = [
                 "images/20170420_145140.jpg", 
                 "images/20170503_142841.jpg", 
                 "images/20170503_084035.jpg", 
                 "images/20170503_163354.jpg", 
                 "images/20170503_163334.jpg", 
                 "images/20170421_114806.jpg"];
var nombre = "Zip_img";
//The function is called
compressed_img(urls,nombre);

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = nombre+".zip";
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if(err) {
         throw err; 
      }
       zip.file(url, data,  {binary:true});
       count++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}

hello. I am using the version3 code to download a bunch of pdf from a database. I am using some big paths and those paths are creating the whole folder heirarchy on the zip. Is there a way to just put them on the top of the zip and not creating useless folders?

swethakrgs · 2020-09-02T07:09:28Z

Hey Thank you all below code is working fine for me
var urls = [
"images/20170420_145140.jpg",
"images/20170503_142841.jpg",
"images/20170503_084035.jpg"];
download() {

        urls.forEach(function (url) {
            JSZipUtils.getBinaryContent(url, function (err, data) {
                if (err) {
                    throw err; // or handle the error
                }
                try {
                    zip.file(count + ".jpg", data, { binary: true });
                    count++;
                    if (count == urls.length) {
                        zip.generateAsync({ type: "blob" }).then(function (content) {
                            FileSaver.saveAs(content, zipFilename);
                        });
                    }
                } catch (e) {
                    console.log("errorrr...k", e)
                }
            });
        });
    }

The mistake I did is zip.file("image", data, { binary: true });
I am passing three URLs but adding name static so it is downloading one file. after changing the name dynamically it is working.

AnjushaJoshi · 2020-10-13T15:11:08Z

https://gist.github.com/noelvo/4502eea719f83270c8e9#gistcomment-2798024: Worked for me!!

Ishaan28malik · 2021-02-27T18:30:02Z

I just created a new App using the multiple-file-downloader

Here

https://github.com/Ishaan28malik/react-zip-download

noelvo/download-multiple-files.js

ramuchintha commented Dec 12, 2016 •

edited

Loading

ramuchintha commented Dec 12, 2016

lmartinez99 commented May 5, 2017 •

edited

Loading

RAJASRINU commented Jun 12, 2017

srinivasulu538034 commented Jun 21, 2017 •

edited

Loading

kinjalhinguss commented Oct 29, 2018

rahgurung commented Dec 29, 2018

anuragteapot commented Dec 31, 2018

karnadii commented Apr 13, 2019

iabdulazeem commented Sep 13, 2019

Revthy commented Nov 8, 2019

varun-singh-01 commented Nov 10, 2019

Hussain-Safwan commented Feb 18, 2020

modbender commented Mar 3, 2020

soulinmaikadua commented Mar 10, 2020

zeroonedev01 commented Jun 25, 2020

Arunwahatule85 commented Jun 27, 2020 •

edited

Loading

Kampadais commented Jul 22, 2020 •

edited

Loading

swethakrgs commented Sep 2, 2020

AnjushaJoshi commented Oct 13, 2020

Ishaan28malik commented Feb 27, 2021

	var zip = new JSZip();
	var count = 0;
	var zipFilename = "zipFilename.zip";
	var urls = [
	'http://image-url-1',
	'http://image-url-2',
	'http://image-url-3'
	];

	urls.forEach(function(url){
	var filename = "filename";
	// loading a file and add it in a zip file
	JSZipUtils.getBinaryContent(url, function (err, data) {
	if(err) {
	throw err; // or handle the error
	}
	zip.file(filename, data, {binary:true});
	count++;
	if (count == urls.length) {
	var zipFile = zip.generate({type: "blob"});
	saveAs(zipFile, zipFilename);
	}
	});
	});

noelvo/download-multiple-files.js

ramuchintha commented Dec 12, 2016 • edited Loading

ramuchintha commented Dec 12, 2016

lmartinez99 commented May 5, 2017 • edited Loading

RAJASRINU commented Jun 12, 2017

srinivasulu538034 commented Jun 21, 2017 • edited Loading

kinjalhinguss commented Oct 29, 2018

rahgurung commented Dec 29, 2018

anuragteapot commented Dec 31, 2018

karnadii commented Apr 13, 2019

iabdulazeem commented Sep 13, 2019

Revthy commented Nov 8, 2019

varun-singh-01 commented Nov 10, 2019

Hussain-Safwan commented Feb 18, 2020

modbender commented Mar 3, 2020

soulinmaikadua commented Mar 10, 2020

zeroonedev01 commented Jun 25, 2020

Arunwahatule85 commented Jun 27, 2020 • edited Loading

Kampadais commented Jul 22, 2020 • edited Loading

swethakrgs commented Sep 2, 2020

AnjushaJoshi commented Oct 13, 2020

Ishaan28malik commented Feb 27, 2021

I just created a new App using the multiple-file-downloader

Here

ramuchintha commented Dec 12, 2016 •

edited

Loading

lmartinez99 commented May 5, 2017 •

edited

Loading

srinivasulu538034 commented Jun 21, 2017 •

edited

Loading

Arunwahatule85 commented Jun 27, 2020 •

edited

Loading

Kampadais commented Jul 22, 2020 •

edited

Loading