码云笔记前端博客
Home > 前端技术 > 纯JS实现zip打包文件并下载

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

2019-08-20 分类:前端技术 作者:码云 阅读(232)

本文共计1866个字,预计阅读时长需要5分钟。

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

如何实现ZIP打包下载?

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

如何使用:

1.引入我们需要的js

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

2.执行打包与下载

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 初始化一个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目录下,大家自行下载。

使用示意:

1
2
3
4
5
6
7
<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属性。

于是有如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 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记录下,顺便记录点其他下载相关的内容。也希望通过本篇文章可以帮到其他类似需求的小伙伴。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 纯JS实现zip打包文件并下载

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648057 次
  • 最近更新: 2019年10月21日