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

Source: Internet
Author: User
Tags ziparchive

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.