纯JS实现zip打包文件并下载

zip打包文件并下载功能对大家来说并不陌生，正好最近在做一个影像项目遇到类似需求，所以我也折腾一下，希望对需要的小伙伴有帮助。

如何实现ZIP打包下载?

通过搜索找到这个，不知道大家遇到过没，我是使用jszip这个项目实现的：https://github.com/Stuk/jszip，压缩和未压缩的JS文件都在dist目录下，大家自行下载。

如何使用：

1.引入我们需要的js


2.执行打包与下载

下面是官方示意代码，我加上了更详细的注释：

//  初始化一个zip打包对象
var  zip  =  new  JSZip();
//  创建一个被用来打包的名为Hello.txt的文件
zip.file("Hello.txt",  "Hello  World\n");
//  创建一个名为images的新的文件目录
var  img  =  zip.folder("images");
//  这个images文件目录中创建一个base64数据为imgData的图像，图像名是smile.gif
img.file("smile.gif",  imgData,  {base64:  true});
//  把打包内容异步转成blob二进制格式
zip.generateAsync({type:"blob"}).then(function(content)  {
        //  content就是blob数据，这里以example.zip名称下载        
        //  使用了FileSaver.js    
        saveAs(content,  "example.zip");
});

/*
最终下载的zip文件包含内容如下：
Hello.txt
images/
        smile.gif
*/
使用非常简单，官方示意也通俗易懂，我直接照着改改效果就出来了。

其中，提到了一个FileSaver.js，这也是非常有名的项目，可以介绍一下。

下载FileSaver.js
FileSaver.js项目地址是：https://github.com/eligrey/FileSaver.js/

压缩和未压缩的JS文件也是在dist目录下，大家自行下载。

使用示意：



FileSaver.js非常强，不仅兼容到IE10+，而且还支持大文件下载，Chrome浏览器下甚至可以下载2GB大小的文件。

FileSaver.js搭配js-xlsx还可以纯前端下载Excel文件。如果是生成DOC文件，试试这个项目。

jszip使用示意
以下来源于张鑫旭老师方法

我的需求是把一堆SVG文件打包下载，已经有SVG代码和id数据（可以作为文件名）。

由于我的下载功能不需要兼容IE浏览器，因此，直接使用了元素下载，基于HTML5  download属性。

于是有如下代码：

//  data是个数组
//  数组项结构  {id:  "icon-xxx",  svgHTML:  "
var  zip  =  new  JSZip();
data.forEach(function  (obj)  {
    //  zip包里面不断塞svg文件
    zip.file(obj.id  +  '.svg',  obj.svgHTML);
});
//  生成zip文件并下载
zip.generateAsync({  
    type:  'blob'
}).then(function(content)  {
    //  下载的文件名
    var  filename  =  key  +  '.zip';
    //  创建隐藏的可下载链接
    var  eleLink  =  document.createElement('a');
    eleLink.download  =  filename;
    eleLink.style.display  =  'none';
    //  下载内容转变成blob地址
    eleLink.href  =  URL.createObjectURL(content);
    //  触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    //  然后移除
    document.body.removeChild(eleLink);
});
FALSE