这篇文章发布于 2019年08月17日,星期六,22:49,归类于 JS实例。 阅读 92883 次, 今日 19 次 14 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8885
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
一、事情的起因
之前做了个SVG Sprites还原工具(上传合并好的SVG Sprites文件,分解成独立的小SVG),然后经用户反馈,希望增加个打包下载功能。
然后我就研究了下,还挺有意思的,目前已经上线,如下图所示:
然后就可以下载了,下面是找到的下载记录。
二、如何实现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文件,试试这个项目。
由于非本文重点,不展开。
另外,纯前端下载方法还有很多。有兴趣可以参考这篇文章:“这应该是你见过的最全前端下载总结”。
四、我的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); });
五、快速结语
以后估计还会遇到类似的需求,所以自己整理了篇tips记录下,顺便记录点其他下载相关的内容。
也希望顺便可以帮到其他类似需求的小伙伴。
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8885
(本篇完)
- node环境中使用fluent-ffmpeg每隔一秒视频截图 (0.443)
- 不使用file类型input也能触发文件上传 (0.384)
- 做了个纯前端JPG/PNG尺寸缩放+压缩的在线工具 (0.384)
- 学习了,CSS中内联SVG图片有比Base64更好的形式 (0.187)
- JS前端创建html或json文件并浏览器导出下载 (0.152)
- 纯前端实现可传图可字幕台词定制的GIF表情生成器 (0.144)
- 又get到了,JS复制图片到剪切板 (0.144)
- 本地MP3封面图、时长等信息的JS读取 (0.144)
- SVG <foreignObject>简介与截图等应用 (0.106)
- 致设计师:图标图形制作-路径为王 (0.098)
- iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览 (RANDOM - 0.063)
a标签的下载在移动端浏览器上,不支持blob和base64的数据
有的浏览器不支持blob和data,例如夸克
这就很有意思了,js的zip打包百度来的远不都是zip等插件使用,为什么都没有原生方法 或者原理之类的讲解
跨域能解决吗
在使用最新的FileSaver.js的时候,chrome浏览器导出的文件没有文件名,是什么问题,火狐是可以的
更正一下是chrome浏览器导出的时候没有后缀名,有没有童鞋遇到过怎么解决的?
楼主有解决多个大文件的打包压缩吗?比如 1GB 以上,会变得比较慢。
没遇到这样的需求。
zip.folder(“中文目录名乱码”);楼主怎么解决的
这个就有意思了,感谢张大大分享
document.body.appendChild(eleLink);
这一行是多余的,并不需要这个操作。同样,反操作也是。
二楼的同学,不加那个火狐会存在兼容性问题的
没测出兼容问题,难道是火狐版本问题?
确实会有问题,之前我就省略过然后火狐点击不了,还是老老实实加上去