张鑫旭老师的文章：https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/

如何实现ZIP打包下载
使用jszip这个项目实现的：https://github.com/Stuk/jszip

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

使用也非常简单：

引入JS

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

执行打包与下载
下面是官方示意代码，我加上了更详细的注释：

// 初始化一个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文件，试试这个项目。

由于非本文重点，不展开。

另外，纯前端下载方法还有很多。有兴趣可以参考这篇文章：https://juejin.cn/post/6844903763359039501

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1183.html

转载时须注明出处及本声明

标签: none

添加新评论