之前做了个SVG Sprites还原工具(上传合并好的SVG Sprites文件,分解成独立的小SVG),然后经用户反馈,希望增加个打包下载功能。
然后就可以下载了,下面是找到的下载记录。
使用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项目地址是: 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文件,试试这个项目。
我的需求是把一堆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);
});
本文地址: https://www.zhangxinxu.com/wordpress/?p=8885
最近有用到微信小程序的downloadFile接口,但是在真机上出现了文件后缀为unknown,导致文件保存失败,这里记录下:下载文件使用downloadFile下载API,改进后的下载保存
a标签完成,js实现下载,js中ajax实现音频或者视频不跳转进行文件下载:先请求音频的链接,再把返回值转换成二进制,再根据他二进制对象生成新链接,再创建a标签,点击a标签;fetch实现
最近项目一个功能需求,需实现将两张图片合成后下载的一个功能。分析完功能需求后,决定直接使用前端技术来实现。为提高效率,使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍
产生白屏问题的原因是因为点击下载按钮的时候实际上因为某些原因产生了2次点击,如果使用的是 window.location.href 这种下载方式或者a标签的方式,会发生链接覆盖,产生页面跳转。如果想要解决这个问题可以采用iframe进行下载
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!