JavaScript 使用JSZip保存文件压缩包并下载
JSZip
jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。
- 官方给的栗子
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 初始化一个zip打包对象
var zip = new JSZip();
// 创建一个被用来打包的名为Hello.txt的文件
zip.file("Hello.txt", "Hello Worldn");
// 创建一个名为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");
}); - 话不多说 上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.3.0/jszip.js"></script>
</head>
<body>
<img src="./img/desp.jpg" alt="">
<img src="./img/headIcon.jpg" alt="">
</body>
<script>
function getBase64Image(img) {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL("image/jpeg");
return dataURL;
}
let imgList = [...document.getElementsByTagName('img')]
console.log(imgList)
let buffer = imgList.map(getBase64Image)
console.log('buffer', buffer)
function saveAs(blob, name) {
let a = document.createElement('a')
let url = window.URL.createObjectURL(blob)
a.href = url
a.download = name
a.click()
}
async function main() {
let zip = new JSZip();
let p = buffer.map(
x => zip.file(Math.random().toString('36').slice(3) + '.jpeg', x.split(',')[1], {
base64: true
})
)
await Promise.all(p)
zip.generateAsync({
type: "blob"
}).then(function(content) {
// see FileSaver.js
saveAs(content, "example.zip");
});
}
main()
</script>
</html>
JavaScript 使用JSZip保存文件压缩包并下载
https://www.ivan.fun/posts/3b99bdb9/