onClick使用jsZip在页面上压缩多个图像src?

马修·哈伍德

我有2张图像显示在页面上。这两个图像都是data:base64我已经通过HTML5download属性将其下载这是一次很好的互动,但是在页面上可能会有许多图像可供下载。如何使用jsZip下载任何图像与类的zip-me:我想触发是onClickid="zip-btn"

请观看现场演示:

JSFiddle

的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>
myself自己

每次调用.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

onClick使用jsZip在页面上压缩多个图像src?

来自分类Dev

onClick使用jsZip可以在页面上压缩多个图像src?

来自分类Dev

如何对页面上的多个图像使用引导模态

来自分类Dev

在单个页面上添加多个图像

来自分类Dev

如何使用外部src压缩图像?

来自分类Dev

使用BeautifulSoup在多个页面上编写循环

来自分类Dev

使用PHP在多个页面上存储数据

来自分类Dev

在多个PHP页面上使用数组?

来自分类Dev

在多个页面上使用套接字

来自分类Dev

如何在多个页面上使用jQuery

来自分类Dev

使用PHP在多个页面上存储数据

来自分类Dev

使用 onclick 更改多个图像

来自分类Dev

智能对齐/页面上多个图像的布局

来自分类Dev

如何在单个页面上打印图像的多个副本

来自分类Dev

条纹结帐-结帐页面上是否可以显示多个图像?

来自分类Dev

如何在单个页面上打印图像的多个副本

来自分类Dev

在页面上为Blackberry 10加载多个图像

来自分类Dev

使用 ggplot 和 marrangeGrob 在多个页面上绘制多个图形

来自分类Dev

MVC使用JavaScript在页面上为画布使用图像路径

来自分类Dev

使用键盘 (JS) 更改页面上的内容(使用图像)

来自分类Dev

如何使用@use在多个页面上使用SASS $ variable?

来自分类Dev

我们可以在Angular7Csv中使用JSZip来压缩多个csv文件吗?

来自分类Dev

如何使用Mechanize计算特定页面上的图像数量?

来自分类Dev

在所有页面上使用大虾的背景图像

来自分类Dev

使用Spring MVC在JSP页面上渲染图像和文本

来自分类Dev

使用EntityFramework在Index.cshtml页面上显示图像

来自分类Dev

使用NextJS中的链接更改页面上未加载的图像

来自分类Dev

如何通过使用Laravel单击想要的页面上的图像?

来自分类Dev

使用PHP上传图像并在单独的页面上显示

Related 相关文章

  1. 1

    onClick使用jsZip在页面上压缩多个图像src?

  2. 2

    onClick使用jsZip可以在页面上压缩多个图像src?

  3. 3

    如何对页面上的多个图像使用引导模态

  4. 4

    在单个页面上添加多个图像

  5. 5

    如何使用外部src压缩图像?

  6. 6

    使用BeautifulSoup在多个页面上编写循环

  7. 7

    使用PHP在多个页面上存储数据

  8. 8

    在多个PHP页面上使用数组?

  9. 9

    在多个页面上使用套接字

  10. 10

    如何在多个页面上使用jQuery

  11. 11

    使用PHP在多个页面上存储数据

  12. 12

    使用 onclick 更改多个图像

  13. 13

    智能对齐/页面上多个图像的布局

  14. 14

    如何在单个页面上打印图像的多个副本

  15. 15

    条纹结帐-结帐页面上是否可以显示多个图像?

  16. 16

    如何在单个页面上打印图像的多个副本

  17. 17

    在页面上为Blackberry 10加载多个图像

  18. 18

    使用 ggplot 和 marrangeGrob 在多个页面上绘制多个图形

  19. 19

    MVC使用JavaScript在页面上为画布使用图像路径

  20. 20

    使用键盘 (JS) 更改页面上的内容(使用图像)

  21. 21

    如何使用@use在多个页面上使用SASS $ variable?

  22. 22

    我们可以在Angular7Csv中使用JSZip来压缩多个csv文件吗?

  23. 23

    如何使用Mechanize计算特定页面上的图像数量?

  24. 24

    在所有页面上使用大虾的背景图像

  25. 25

    使用Spring MVC在JSP页面上渲染图像和文本

  26. 26

    使用EntityFramework在Index.cshtml页面上显示图像

  27. 27

    使用NextJS中的链接更改页面上未加载的图像

  28. 28

    如何通过使用Laravel单击想要的页面上的图像?

  29. 29

    使用PHP上传图像并在单独的页面上显示

热门标签

归档