https://stuk.github.io/jszip/documentation/examples.html
web前端解壓zip文件有什么用：
只考慮標准瀏覽器的話， 服務器只要傳輸壓縮包到客戶端， 節約了帶寬， 而且節約了傳輸時間， 聽起來好像很厲害的說；
如果前端的代碼很多， 而且包含大副的圖片，那么就可以把js和css和jpg和png等各種數據通過服務端打包成zip傳送到瀏覽器， 瀏覽器負責解壓， css實用動態生成插入到dom中，js也用globalEval直接執行， jpg或者png各種圖片文件由blob流轉化為image， 直接插入到瀏覽器中；
html5支持讀取Blob(二進制大對象, file文件也是繼承了Blob)， 並轉化為圖片流或者文字流或者其他流格式， 這也是為什么瀏覽器可以讀取"application/zip"文件的原因；
要在瀏覽器中解壓zip文件的話需要引入四個js ， 因為UnZipArchive.js依賴了zip.js, mime-type.js和jquery.js , 測試demo如下：
|
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
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
</head>
<body>
<h2>
demo
</h2>
<div>
<input type=
"file"
id=
"file"
>
</div>
<ul id=
"dir"
>
</ul>
<script>
$(
"#file"
).change(
function
(e) {
var
file =
this
.files[0];
window.un =
new
UnZipArchive( file );
un.getData(
function
() {
//獲取所以的文件和文件夾列表;
var
arr = un.getEntries();
//拼接字符串
var
str =
""
;
for
(
var
i=0; i<arr.length; i++ ) {
//點擊li的話直接下載文件;
str +=
"<li onclick=download('"
+arr[i]+
"')>"
+arr[i]+
"</li>"
};
$(
"#dir"
).html( str );
});
});
var
download =
function
( filename ) {
un.download( filename );
};
</script>
</body>
</html>
|
UnzioarichiveJS 是自己封裝的， 有任何問題的話請及時反饋
解壓ZIP壓縮包的完整DEMO
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
<style>
code{
display: block;
padding: 10px;
background:
#eee;
}
</style>
</head>
<body>
<div>
<h1>
兼容性
</h1>
<div>
<p>
zip.js可以在所有的chrome瀏覽器和firefox瀏覽器中運行， 可以在safari6和IE10，以及IE10以上運行;
</p>
<p>
如果要在IE9和safari中運行需要兩個設置：
</p>
<code>
1：zip.useWebWorkers ==
false
</code>
<code>
2：並引用這個JS:https:
//bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js
</code>
</div>
<h2>
demo
</h2>
<div>
<input type=
"file"
id=
"file"
>
</div>
<ul id=
"dir"
>
</ul>
<script>
$(
"#file"
).change(
function
(e) {
var
file =
this
.files[0];
window.un =
new
UnZipArchive( file );
un.getData(
function
() {
var
arr = un.getEntries();
var
str =
""
;
for
(
var
i=0; i<arr.length; i++ ) {
str +=
"<li onclick=download('"
+arr[i]+
"')>"
+arr[i]+
"</li>"
};
$(
"#dir"
).html( str );
});
});
var
download =
function
( filename ) {
un.download( filename );
};
</script>
</div>
<script>
/**
* @desc 解壓縮文件的類;
* @return UnZipArchive 的實例;
* */
var
UnZipArchive =
function
( blob ) {
if
( !blob ) {
alert(
"參數不正確, 需要一個Blob類型的參數"
);
return
;
};
if
( !(blob
instanceof
Blob) ) {
alert(
"參數不是Blob類型"
);
return
;
};
function
noop() {};
this
.entries = {};
this
.zipReader = {};
var
_this =
this
;
this
.length = 0;
this
.onend = noop;
this
.onerror = noop;
this
.onprogress = noop;
//創建一個延遲對象;
var
def =
this
.defer =
new
$.Deferred();
zip.createReader(
new
zip.BlobReader( blob ),
function
(zipReader) {
_this.zipReader = zipReader;
zipReader.getEntries(
function
(entries) {
_this.entries = entries;
//繼續執行隊列;
def.resolve();
});
},
this
.error.bind(_this) );
};
/**
* @desc 把blob文件轉化為dataUrl;
* */
UnZipArchive.readBlobAsDataURL =
function
(blob, callback) {
var
f =
new
FileReader();
f.onload =
function
(e) {callback( e.target.result );};
f.readAsDataURL(blob);
};
$.extend( UnZipArchive.prototype, {
/**
* @desc 獲取壓縮文件的所有入口;
* @return ArrayList;
* */
"getEntries"
:
function
() {
var
result = [];
for
(
var
i= 0, len =
this
.entries.length ; i<len; i++ ) {
result.push(
this
.entries[i].filename );
}
return
result;
},
/**
* @desc 獲取文件Entry;
* @return Entry
* */
"getEntry"
:
function
( filename ) {
var
entrie;
for
(
var
i= 0, len =
this
.entries.length ; i<len; i++ ) {
if
(
this
.entries[i].filename === filename) {
return
this
.entries[i];
};
}
},
/**
* @desc 下載文件
* @param filename;
* @return void;
* */
"download"
:
function
( filename , cb , runoninit) {
var
_this =
this
;
this
.defer =
this
.defer.then(
function
() {
var
def = $.Deferred();
if
(!filename)
return
;
if
(runoninit) {
return
runoninit();
};
var
entry = _this.getEntry( filename );
if
(!entry)
return
;
entry.getData(
new
zip.BlobWriter(zip.getMimeType(entry.filename)),
function
(data) {
if
( !cb ) {
UnZipArchive.readBlobAsDataURL(data,
function
( dataUrl ) {
var
downloadButton = document.createElement(
"a"
),
URL = window.webkitURL || window.mozURL || window.URL;
downloadButton.href = dataUrl;
downloadButton.download = filename;
downloadButton.click();
def.resolve( dataUrl );
_this.onend();
});
}
else
{
cb( data );
def.resolve( data );
}
});
return
def;
});
},
/**
* @desc 獲取對應的blob數據;
* @param filename 文件名;
* @param callback回調, 參數為 blob;
* @desc 或者可以直接傳一個函數作為zip解壓縮完畢的回調;
* */
"getData"
:
function
( filename, fn ) {
if
(
typeof
filename ===
"string"
) {
this
.download(filename,
function
( blob ) {
fn&&fn( blob );
});
}
else
if
(
typeof
filename ===
"function"
) {
this
.download(
"test"
,
null
,
function
( blob ) {
filename();
});
};
},
"error"
:
function
() {
this
.onerror(
this
);
throw
new
Error(
"壓縮文件解壓失敗"
);
}
});
</script>
</body>
</html>
|