Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save c4software/981661f1f826ad34c2a5dc11070add0f to your computer and use it in GitHub Desktop.
Save c4software/981661f1f826ad34c2a5dc11070add0f to your computer and use it in GitHub Desktop.
Download multiple files then compress to one zip file using JSZip & JSZip-utils
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) {
zip.generateAsync({type:'blob'}).then(function(content) {
saveAs(content, zipFilename);
});
}
});
});
@ArashChoobdar
Copy link

I have some SVG file and I convert it to PNG and now I want to push the PNG file in a folder and zip it and download it , but in this example want URLs but I don't have URL but I have the element , I want to know what I can do for it ?

@Apy102
Copy link

Apy102 commented Dec 29, 2022

I'm facing cors issue, how can i solve that? for testing when i dessabled the web security then zip file properly got downloaded. so please suggest me how can i solve this cors error

@rami-alloush
Copy link

This is what's working for me recently on Typescript

import { saveAs } from 'file-saver';
import * as JSZip from 'jszip';
// @ts-ignore
import * as JSZipUtils from 'jszip-utils';

  downloadAllFiles(urls: any[]): void {
    var zip = new JSZip();
    var count = 0;
    var zipFilename = 'zipFilename.zip';

    urls.forEach(function (url, idx) {
      console.log(url);

      var filename = 'filename' + idx + '.pdf';
      // loading a file and add it in a zip file
      JSZipUtils.getBinaryContent(
        url,
        function (
          err: any,
          data:
            | string
            | ArrayBuffer
            | number[]
            | Uint8Array
            | Blob
            | NodeJS.ReadableStream
            | Promise<
                | string
                | ArrayBuffer
                | number[]
                | Uint8Array
                | Blob
                | NodeJS.ReadableStream
              >
        ) {
          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) {
              saveAs(content, zipFilename);
            });
          }
        }
      );
    });
  }

@Atabord
Copy link

Atabord commented Jun 27, 2023

I'm facing cors issue, how can i solve that? for testing when i dessabled the web security then zip file properly got downloaded. so please suggest me how can i solve this cors error

in development mode you could add this to the beginning of the url https://cors-anywhere.herokuapp.com/ example https://cors-anywhere.herokuapp.com/https://myurl.com/myImage.com

but for production environment you should configure your server to accept this kind of connections with Access-Control-Allow-Origin from the server side.

@ElvisAns
Copy link

What is saveAs function? Where it came from?

https://github.com/eligrey/FileSaver.js/

include this in your file after npm i save-as: import { saveAs } from 'save-as'

Note: each file needs an unique filename, otherwise the zip will contain only one file. Struggled with this for 2 hours lol. also, the filename needs to include the type. For me it is: zip.file(image+ ".jpg", data, {binary:true});

+1
I have also struggled with file name being redundant and i ended up with a zip with one file, i suggest adding something like self.crypto.randomUUID(); https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID to ensure uniqueness!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment