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

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

如何实现 ZIP 打包下载?

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

如何使用：

1.引入我们需要的 js

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

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 目录下，大家自行下载。

使用示意：

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

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

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

jszip 使用示意

以下来源于张鑫旭老师方法

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

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

于是有如下代码：

// data 是个数组
// 数组项结构 {id: "icon-xxx", svgHTML: "<svg>..."}
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);
});

结束语

以上就是 jszip 打包并下载的使用方法总结，以后估计还会遇到类似的需求，所以自己整理了篇 tips 记录下，顺便记录点其他下载相关的内容。也希望通过本篇文章可以帮到其他类似需求的小伙伴。

以上关于纯JS实现zip打包文件并下载的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。