我有2张图像显示在页面上。这两个图像都是data:base64
。我已经通过HTML5download
属性将其下载。这是一次很好的互动,但是在页面上可能会有许多图像可供下载。如何使用jsZip
下载任何图像与类的zip-me
:我想触发是onClick
的id="zip-btn"
。
请观看现场演示:
的HTML
<div>
<img src="base64string" class="zip-me" />
<a href="base64string" download="image1.png" />
</div>
<div>
<img src="base64string" class="zip-me" />
<a href="base64string" download="image2.png" />
</div>
<button id="zip-btn" onClick="downloadZip()"> Download Zip </button>
每次调用.file()时,它都会向zip文件中添加另一个文件。您只需要从映像src中获取base64,然后在options参数中指定base64文件类型。这来自jszip的文档:
zip.file("Hello.txt", "Hello World\n");
zip.file("smile.gif", "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=", {base64: true});
zip.file("magic.txt", "U2VjcmV0IGNvZGU=", {base64: true, binary: false});
zip.file("Xmas.txt", "Ho ho ho !", {date : new Date("December 25, 2007 00:00:01")});
zip.file("folder/file.txt", "file in folder");
zip.file("animals.txt", "dog,platypus\n").file("people.txt", "james,sebastian\n");
// result : Hello.txt, smile.gif, magic.txt, Xmas.txt, animals.txt, people.txt,
// folder/, folder/file.txt
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句