使用zip.js壓縮文件和解壓文件

時間 2019-12-01

標籤使用 zip.js zip 壓縮文件解壓欄目數據壓縮简体版

原文原文鏈接

zip.js官方網站爲:https://stuk.github.io/jszip/html

在此說明，下面的例子基本上來自官方示例，你們能夠作參考，官方示例地址爲:https://stuk.github.io/jszip/documentation/examples.htmlnode

官方例子支持在線演示效果。jquery

研究的目的是:如何獲取zip包中的信息並讀取傳輸(其實使用JAVA或者node.js更容易實現，之因此使用js也是由於業務的特殊性)。git

準備庫:github

jszip.js能夠去該地址下載:https://github.com/Stuk/jszipchrome

下載成功解壓是這樣的，如圖所示:瀏覽器

 <script src="jszip.js"></script>和<script src="FileSaver.js"></script>分別在dist和vendor目錄下

jszip-utils.js能夠去該地址下載:https://github.com/Stuk/jszip-utils
app

jszip-utils.js 在dist目錄下

1、使用zip.js壓縮生成zip包網站

源碼以下:this

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jszip.js"></script>
    <script src="jszip-utils.js"></script>
    <script src="FileSaver.js"></script>
</head>
<body>
<input type="button" value="生成zip" onclick="test()"/>
<script>
function test(){

var zip = new JSZip();
zip.file("1.in", "1 1");
zip.file("1.out","2");
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});


}
</script>
</body>
</html>

2、讀取zip包內容並輸出文件目錄

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://sqqihao.github.io/codes/zipjs/zip.js"></script>
    <script src="http://gildas-lormeau.github.io/zip.js/demos/mime-types.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="http://sqqihao.github.io/codes/zipjs/UnZipArchive.js"></script>
    <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：並引用這個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>
</body>
</html>

效果如圖所示:

注意事項:

不知道因爲是什麼緣由，若是單獨將其寫入某個html運行起來就會出現這樣的狀況，如圖所示:

若是是經過git clone https://github.com/sqqihao/sqqihao.github.io

運行zip.html就會出現前面的正常解壓並讀取目錄的結果。

另外請注意最好是經過火狐瀏覽器運行這段代碼，不然可能出現這種狀況，如圖所示:

這篇文章主要創建在官方文檔和這個github項目的基礎上，但願可以對小夥伴們有所幫助。

相關標籤/搜索