纯前端JS zip打包文件并下载 « 张鑫旭 |
您所在的位置：网站首页 › 未压缩的图片文件名 › 纯前端JS zip打包文件并下载 « 张鑫旭 |
|
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 执行打包与下载下面是官方示意代码，我加上了更详细的注释： // 初始化一个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.jsFileSaver.js项目地址是：https://github.com/eligrey/FileSaver.js/ 压缩和未压缩的JS文件也是在dist目录下，大家自行下载。 使用示意： var canvas = document.getElementById("zxx-canvas"); canvas.toBlob(function(blob) { saveAs(blob, "example.png"); });FileSaver.js非常强，不仅兼容到IE10+，而且还支持大文件下载，Chrome浏览器下甚至可以下载2GB大小的文件。 FileSaver.js搭配js-xlsx还可以纯前端下载Excel文件。如果是生成DOC文件，试试这个项目。 由于非本文重点，不展开。 另外，纯前端下载方法还有很多。有兴趣可以参考这篇文章：“这应该是你见过的最全前端下载总结”。 四、我的jszip使用示意我的需求是把一堆SVG文件打包下载，已经有SVG代码和id数据（可以作为文件名）。 由于我的下载功能不需要兼容IE浏览器，因此，直接使用了元素下载，基于HTML5 download属性。 于是有如下代码： // data是个数组 // 数组项结构 {id: "icon-xxx", svgHTML: "..."} 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 简介与截图等应用 (0.106)致设计师：图标图形制作-路径为王 (0.098)checkbox复选框的一些深入研究与理解 (RANDOM - 0.012) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |