介绍JSZip

最近我看了David Walsh blog, https://davidwalsh.name/javascript-zip, 知道了我们可以在客户端浏览器端,用Javascript 做文件压缩,这个项目是 JSZip, Github 链接是 https://github.com/Stuk/jszip or https://stuk.github.io/jszip/, JSZip 可以在多个平台和浏览器对文件压缩,如Android, Iphone, IE, Chrome, Firefox and Safari.
1. 这里是一个例子来生成 zip file, 其中FileSaver.js 文件在JSZip下载安装包的 vendor 目录  
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<title>Generate ZIP file</title>
<script type="text/javascript" src = 'jszip.js'></script>
<script type="text/javascript" src = 'FileSaver.js'></script>
<style type ='text/css'>
</style>
<script type="text/javascript">
function zipclick() {
var zip = new JSZip();
zip.file("hello.txt", "Hello World, Good morning\n");
zip.generateAsync({type: "blob"})
.then(function(content) {
saveAs(content, 'hello.zip');
});
}
</script>
</head>
<body>
<button οnclick='zipclick()'>TEST JSZIP</button>
</body>
</html>

2. 这里是另一个例子,其中FileSaver.js 文件在JSZip下载安装包的 vendor 目录,  生成的zip文件 包括目录,目录中是一个图片文件, 其中 birds.jpg 是由 字符串生成的图片文件,就是用 字符串来表现图片,网上可以找到免费资源来 有图片转化为字符串,可以找到 Base64 image encoder, https://www.base64-image.de/, "ON CLICK HERE" button 来找到要转化的图片文件,“show code” button, 在<img> elements中, copy "base64,(逗号)"之后的字符串就可以。  
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<title>JSZIP image</title>
<script type="text/javascript" src = 'jszip.js'></script>
<script type="text/javascript" src = 'FileSaver.js'></script>
<style type ='text/css'>
</style>
<script type="text/javascript">
function zipclick() {
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");

imgData = "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";
img.file("birds.jpg", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
   // see FileSaver.js
   saveAs(content, "hello2.zip");
});
}
</script>
</head>
<body>
<button οnclick='zipclick()'>TEST JSZIP</button>
</body>
</html>

3. JSZip api link https://stuk.github.io/jszip/documentation/api_jszip.html


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值