Generate a ZIP archive on the web side via JavaScript and download

Source: Generate a ZIP archive on the web side via JavaScript and download

What is Zip.js?

Zip.js's GitHub project address: http://gildas-lormeau.github.io/zip.js/

The zip.js encapsulates a plug-in that generates a ZIP file on the Web page, creates a compressed package containing folders and files directly in the Web page, and can also customize the name and download it.

How to use:

1: Reference Zip.js

2: quoting jquery;

3: And refer to the encapsulated Ziparchive.js , (because the Zip.js API is cumbersome to use, so it encapsulates the implementation of the plugin)

4: Quoting Mime-types.js;

　　View DEMO , using the following methods:

<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title></title> <script src="Http://gildas-lormeau.github.io/zip.js/demos/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://files.cnblogs.com/files/diligenceday/ZipArchive.js"></script>varz =Newziparchive; Z.addfile ("A/a.txt","aaaaaaacontent"); Z.addfile ("Aaaa.txt","AAAAAAACCCCC"); Z.export ("Nono");</script></body>
　　demo in the back: the file is downloaded and the folder is formatted as follows:
Create detailed source code for compressed files and folders:
<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title></title> <script src="Http://gildas-lormeau.github.io/zip.js/demos/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> <style>code{Display:block;            padding:10px;        Background: #eee; }    </style>compatibilityZip.js can be run in all Chrome and Firefox browsers, and can be run in Safari6 and IE10, as well as IE10; </p> <p>If you want to run in IE9 and Safari, you need two settings:</p> <code>1: Zip.usewebworkers = =false</code> <code>2: and quote this JS:HTTPS://Bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js</code> </div> </div><script>Zip.workerscriptspath="http://gildas-lormeau.github.io/zip.js/demos/"; /** * @desc compressed files;     * @event onprogress, onend, onerror; * */    varZiparchive =function () {function noop () {};  This. Name ="File not named";  This. Zippedblob = {}; var_this = This;  This. length =0;  This. OnEnd =NoOp;  This. onerror =NoOp;  This. OnProgress =NoOp; //create a deferred object;        vardef = This. defer =New $.        Deferred (); Zip.createwriter (NewZip. Blobwriter ("Application/zip"), function (zipwriter) {_this.zipwriter=Zipwriter; //continue execution of the queue;Def.resolve (); },  This. Error);    }; Ziparchive.blob=function (filename, content) {return NewBlob ([content], {type:zip.getMimeType (filename)});    }; $.extend (Ziparchive.prototype, {/** * @desc Add File * @param String filename is the name of the file;         * @param String content;      * @param Object Options parameter * For example: {level:0} compression level, 0 to 9; * For example: {comment: "hint text"} * For example: {lastmoddate: "Last Edit Time"} **/        "AddFile": function (filename, content, options) {var_this = This; Blob=ziparchive.blob (filename, content); //in order to produce the chain effect, the deferrer must be assigned to the new defer             This. defer = This. Defer.then (function () {vardef = $.                Deferred (); _this.zipwriter.add (filename,Newzip. Blobreader (BLOB), function () {//ReaderConsole.log ("AddFile success!!");                            Def.resolve (); //Zipwriter.close (callback);}, function (size, total) {//OnEnd_this.onend (filename, blob, total); _this.length+=Total ; }, Function () {//onprogress_this.onprogress (filename, blob, total); },options|| {                            //Options                        }); returndef;        }); },        /** * @desc Add folder, I find this file cannot be created;         * @desc Create folder function is not easy to use, you need to create folders you create folders and corresponding files through Zipwriter.addfile ("Directory/filename.txt", blob ());; * */        "_addfolder": Function (foldername, options) {//The Create folder feature is not available at this time; //Create folder function is not easy to use, create folders and files directly through Zipwriter.addfile ("Directory/filename.txt", Blob ())            return  This; },        "size": Function () {return  This. Length; },        /** * @desc get blob file **/        "Get": Function () {return  This. Zippedblob; },        /** * @desc exported to zip file **/        "Export": function (name) {Name= Name | | This. Name; var_this = This;  This. Defer.then (function () {_this.zipwriter.close (function (zippedblob) {if(typeofName = = ="string"||typeofName = = =" Number") {                        varDownloadbutton = Document.createelement ("a"), URL= Window.webkiturl | | Window.mozurl | |window.                        URL; Downloadbutton.href=Url.createobjecturl (ZIPPEDBLOB); Downloadbutton.download= name +". zip";                    Downloadbutton.click (); }Else{name (ZIPPEDBLOB);                };            });        }); },        "Error": Function () { This. onerror ( This ); Throw NewError ("compressed file creation failed"); }    });</script><script>varz =Newziparchive; Z.addfile ("A/a.txt","aaaaaaacontent"); Z.addfile ("Aaaa.txt","AAAAAAACCCCC"); Z.export ("Nono");</script></body>
File has been uploaded to GitHub
ZIPJS Official homepage and API
The origin of the zip format Baidu Encyclopedia
Application of ZIP compression and decompression technology in HTML5 browser
   NONO  
Source: http://www.cnblogs.com/diligenceday/
QQ: 287101329
Generate a ZIP archive on the web side via JavaScript and download