Zip download not working

JavaScript
1

I am just testing the example mentioned here :

 <div class="row" id="downloadFiles" style= "margin-top: 25px;">
                   
   <button class="downloadzip"> Download from here!</button>
				            
       </div>

$( ".downloadzip" ).click(function() {
	  alert( "Handler for .click() called." );
	  
	  var zip = new JSZip();
	  zip.file("Hello.txt", "Hello World\n");
	 /*  var img = zip.folder("images");
	  img.file("smile.gif", imgData, {base64: true}); */
	  zip.generateAsync({type:"blob"})
	  .then(function(content) {
	      // see FileSaver.js
	      saveAs(content, "example.zip");
	  });
	});

And trying to download after clicking a button but nothing is happening. Is there something wrong I am doing? I am not seeing any errors in the console

2

Are you putting the javascript before the HTML?

3

My structure is like this :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
<link href="style.css" rel="stylesheet" >
</head> 
<body>
<div class="row" id="downloadFiles" style= "margin-top: 25px;">
       <button class="downloadzip"> Download from here!</button>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
</script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="js/jszip.js"></script>
 
 <script>
 
 $( ".downloadzip" ).click(function() {
	  alert( "Handler for .click() called." );
	  
	  var zip = new JSZip();
	  zip.file("Hello.txt", "Hello World\n");
	 /*  var img = zip.folder("images");
	  img.file("smile.gif", imgData, {base64: true}); */
	  zip.generateAsync({type:"blob"})
	  .then(function(content) {
	      // see FileSaver.js
	      saveAs(content, "example.zip");
	  });
	});

 
 
 </script>     


</body>
</html>

Anything I would need to change here? I do see this alert ( alert( "Handler for .click() called." );) when I click on the button.

4

Well for starters, start using a version of jQuery that isnt over a decade old. The current release of jquery is 3.3.1. Will dig into JSZip for a second…

5

which of your javascript files defines this function, because it’s not JSZip.

6

Just noticed that there is FileSaver.js as per the comments of this example:

52%20PM

But I didn’t see it when I downloaded it manually.

7

So I dont understand how it wouldn’t be throwing an error into the javascript console if this function is missing and undefined. You’re sure nothing appears in the console?

8

Let me double check.

9

Surprisingly I don’t see any error. I added some console logs as shown below:

$( ".downloadzip" ).click(function() {
	  alert( "Handler for .click() called." );
	  console.log("Just below Handler");
	  
	  var zip = new JSZip();
	  zip.file("Hello.txt", "Hello World\n");
	
	  zip.generateAsync({type:"blob"})
	  .then(function(content) {
	      // see FileSaver.js
	      console.log("Just below Comment");
	      saveAs(content, "example.zip");
	      console.log("Just below saveAs");
	  });
	});

And I saw only two getting printed out of three which are :

  1. Just below Handler
  2. Just below Comment

The third one wasn’t printed (Just below saveAs)

10

Which means your console is filtering error messages out, i’m guessing. It’s definitely the saveAs line causing it, obviously.

Googling around for advice on the matter… assuming you’re using Chrome, make sure you havent got any filters on (next to the filter box, it should say “All levels” and if you drop down the arrow next to it, it should have check marks next to everything)

11

It was firefox and Microsoft Edget not showing error. Chrome did show it now:

index.html:106 Uncaught (in promise) ReferenceError: saveAs is not defined
    at index.html:106

I am wondering, where is this FileSaver.js is available? In the documentation they didn’t mention about it except in the comments. By any chance, you saw it somewhere?

Thanks

12
1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.