Pure front-end JS zip package file and download

1. The cause of the incident

I made an SVG Sprites restoration tool before (uploading the merged SVG Sprites file and decomposing it into independent small SVG), and then after user feedback, I hope to add a package download function.

Then I studied it, which is quite interesting, and it is currently online, as shown in the following figure:

Then you can download. Below is the download record found.

2. How to realize ZIP package download

Realized using the jszip project: https://github.com/Stuk/jszip

The compressed and uncompressed JS files are in the dist directory , and you can download them yourself.

It is also very simple to use:

1. Introduce JS

   <script src="./jszip.min.js"></script>

2. Perform packaging and download

   The following is the official code, I added more detailed comments:

   // Initialize a zip packaging object 
   var zip = new JSZip(); 
   // Create a file named Hello.txt to be used for packaging 
   zip.file("Hello.txt", "Hello World\n"); 
   / / Create a new file directory named images 
   var img = zip.folder("images"); 
   // Create an image with base64 data as imgData in this images file directory, the image name is smile.gif 
   img.file(" smile.gif", imgData, {base64: true}); 
   // Asynchronously convert the packaged content into blob binary format 
   zip.generateAsync({type:"blob"}).then(function(content) { 
       // content is blob Data, downloaded here with the name example.zip     
       // FileSaver.js   
       saveAs(content, "example.zip"); 
   }); 
   
   /*The 
   final downloaded zip file contains the following content: 
   Hello.txt 
   images/ 
       smile.gif 
   * /

It is very simple to use, and the official instructions are also easy to understand. I directly followed the changes and the effect came out.

Among them, a FileSaver.js was mentioned, which is also a very famous project, you can introduce it.

Three, pure front-end download FileSaver.js

The FileSaver.js project address is: https://github.com/eligrey/FileSaver.js/

The compressed and uncompressed JS files are also in the dist directory , you can download them yourself.

Usage hint:

<script src="./FileSaver.min.js"></script>
<script>
var canvas = document.getElementById("zxx-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "example.png");
});
</script>

FileSaver.js is very strong, not only compatible to IE10+, but also supports large file downloads, even 2GB files can be downloaded under the Chrome browser.

FileSaver.js with js-xlsx can also download Excel files from the pure front end. If it is to generate a DOC file, try this project .

Since it is not the focus of this article, it will not be expanded.

In addition, there are many pure front-end download methods. If you are interested, you can refer to this article: " This should be the most complete front-end download summary you have ever seen ."

Four, my jszip usage schematic

My requirement is to package and download a bunch of SVG files, which already have SVG code and id data (which can be used as the file name).

Since my download function does not need to be compatible with IE browser, I directly use the <a>element download based on the HTML5 download attribute .

So there is the following code:

// data is an array 
// array item structure {id: "icon-xxx", svgHTML: "<svg>..."} 
var zip = new JSZip(); 
data.forEach(function (obj) { 
  // zip The package keeps stuffing svg files 
  zip.file(obj.id +'. svg ', obj.svgHTML); 
}); 
// Generate zip file and download 
zip.generateAsync({ 
  type:'blob' 
}).then(function (content) { 
  // The downloaded file name 
  var filename = key +'.zip'; 
  // Create a hidden downloadable link 
  var eleLink = document.createElement('a'); 
  eleLink.download = filename; 
  eleLink.style. display ='none'; 
  // The downloaded content is turned into a blob address 
  eleLink.href = URL.createObjectURL(content); 
  // Trigger to click 
  document.body.appendChild(eleLink);
  eleLink.click();
  // then remove 
  document.body.removeChild(eleLink); 
});

Five, quick conclusion

It is estimated that similar needs will be encountered in the future, so I compiled the tips and recorded it by myself, and recorded other download-related content by the way.

I also hope that by the way, I can help other friends with similar needs.