纯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打包文件并下载