Learn Javascript
jszip

主要兩個部分,一個在ZIP中產生檔案,一個在ZIP中產生目錄,分別是zip.file(),zip.folder()。

使用方法類似於把ZIP當成一個根目錄，例如假定要產生的ZIP目錄如下

+--text.txt
|
+--images
        |
        +---icon.gif
  1. zip= new JSZip(),產生容器
  2. zip.file(檔案名稱,檔案內容)
  3. folder = zip.folder("images")
  4. (現在folder可以在利用file)
  1. zip.generateAsync({type:"blob"}).then(...)
 var imgData = "icon.gif 的base64資料";
    var zip = new JSZip();
    zip.file("text.txt", "hi world\n");
    var imgfolder = zip.folder("images");
    imgfolder.file("icon.gif", imgData, {base64: true});
    
    zip.generateAsync({type:"blob"}).then(function(content) {
         //另存新檔案
      lnk = document.createElement("a")   
      document.body.appendChild(lnk);
      lnk.download = "DemoZip.zip"; 
      lnk.href = (URL || webkitURL).createObjectURL(content);
      lnk.innerHTML = "Right-click + Save as to download zip file";
      //lnk.click(); //或是代換上面的提示直接下載     
      document.body.removeChild(lnk);
    });

測試

demo 1

外部連結 看內容 
<!DOCTYPE html>

<html>
<head>

<script src="http://stuk.github.io/jszip/dist/jszip.js"></script>


</head>


<body>
Loading external lib + images... hold on...
<br><a id=lnk></a>


<script>
// create archive before loading process begin
var zip = new JSZip();

// image list to add:
var images = [
     // "img/hollow.jpg"
	 "../gif/0001.jpg"
    ],
    index = 0;  // for loader

// function to load a single image as arraybuffer using XMLHttpRequests
// it will assume cross-origin usage is allowed
function loadAsArrayBuffer(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "arraybuffer";
  xhr.onerror = function() {/* handle errors*/};
  xhr.onload = function() {
    if (xhr.status === 200) {callback(xhr.response, url)}
    else {/* handle errors*/}
  };
  xhr.send();
}

// loading process. Here it will load one and one image.
// You can modify it to load several at once but some browsers put
// a cap on how many XHR connections can be open at the same time..
(function load() {
  if (index < images.length) {
    loadAsArrayBuffer(images[index++], function(buffer, url) {
      var filename = getFilename(url);
      zip.file(filename, buffer); // image has loaded, add it to archive
      load();                     // load next image
    })
  }
  else {                          // done! present archive somehow
    zip.generateAsync({type:"blob"}).then(function(content) {
      // save out
      lnk.href = (URL || webkitURL).createObjectURL(content);
      lnk.innerHTML = "Right-click + Save as to download zip file";
      lnk.download = "DemoZip.zip";
    });
  }
})();

// Just for this demo! keep separate array with filename or
// modify to allow for "filename-less" uris.
function getFilename(url) {
  return url.substr(url.lastIndexOf("/") + 1)
}

</script>
</body>
</html>
檔案內容
<!DOCTYPE html>

<html>
<head>

<script src="http://stuk.github.io/jszip/dist/jszip.js"></script>


</head>


<body>
Loading external lib + images... hold on...
<br><a id=lnk></a>


<script>
// create archive before loading process begin
var zip = new JSZip();

// image list to add:
var images = [
     // "img/hollow.jpg"
	 "../gif/0001.jpg"
    ],
    index = 0;  // for loader

// function to load a single image as arraybuffer using XMLHttpRequests
// it will assume cross-origin usage is allowed
function loadAsArrayBuffer(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "arraybuffer";
  xhr.onerror = function() {/* handle errors*/};
  xhr.onload = function() {
    if (xhr.status === 200) {callback(xhr.response, url)}
    else {/* handle errors*/}
  };
  xhr.send();
}

// loading process. Here it will load one and one image.
// You can modify it to load several at once but some browsers put
// a cap on how many XHR connections can be open at the same time..
(function load() {
  if (index < images.length) {
    loadAsArrayBuffer(images[index++], function(buffer, url) {
      var filename = getFilename(url);
      zip.file(filename, buffer); // image has loaded, add it to archive
      load();                     // load next image
    })
  }
  else {                          // done! present archive somehow
    zip.generateAsync({type:"blob"}).then(function(content) {
      // save out
      lnk.href = (URL || webkitURL).createObjectURL(content);
      lnk.innerHTML = "Right-click + Save as to download zip file";
      lnk.download = "DemoZip.zip";
    });
  }
})();

// Just for this demo! keep separate array with filename or
// modify to allow for "filename-less" uris.
function getFilename(url) {
  return url.substr(url.lastIndexOf("/") + 1)
}

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

demo 2

外部連結 看內容 
<!DOCTYPE html>

<html>
<head>
  <script src="http://stuk.github.io/jszip/dist/jszip.js"></script>


<!-- <script src="lib\stuk_jszip\dist\jszip.min.js"></script> -->

<script>
 var zip = new JSZip();
 var reader = new FileReader();
 reader.onload = function(e) {  
  // e: progressEvent
  // e.target: FileReader Object 所以可以用上面的變數reader 取代.
  // e.target.result就是圖片的base64位址資訊(result of readAsDataURL)
  // 也可以是ArrayBuffer, readAsArrayBuffer
  zip.folder("xx/xx/xx").file(reader.filename, reader.result);


    zip.generateAsync({type:"blob"}).then(function(content) {
	// content 應該是一個blob 型態的 zip 檔案。
      // save out
      lnk.href = URL.createObjectURL(content);
      lnk.innerHTML = "Right-click + Save as to download zip file";
      lnk.download = "DemoZip.zip";
    });

};
// Just for this demo! keep separate array with filename or
// modify to allow for "filename-less" uris.
function getFilename(url) {
  return url.substr(url.lastIndexOf("/") + 1)
}

function zipit(e){
 reader.filename=e.files[0].name;
 reader.readAsArrayBuffer(e.files[0]);
}

</script>

</head>


<body>
<input id="browse" type="file" onchange="zipit(this)">
<br><a id=lnk></a>

 
</body>
</html>
<!DOCTYPE html>

<html>
<head>
  <script src="http://stuk.github.io/jszip/dist/jszip.js"></script>


<!-- <script src="lib\stuk_jszip\dist\jszip.min.js"></script> -->

<script>
 var zip = new JSZip();
 var reader = new FileReader();
 reader.onload = function(e) {  
  // e: progressEvent
  // e.target: FileReader Object 所以可以用上面的變數reader 取代.
  // e.target.result就是圖片的base64位址資訊(result of readAsDataURL)
  // 也可以是ArrayBuffer, readAsArrayBuffer
  zip.folder("xx/xx/xx").file(reader.filename, reader.result);


    zip.generateAsync({type:"blob"}).then(function(content) {
	// content 應該是一個blob 型態的 zip 檔案。
      // save out
      lnk.href = URL.createObjectURL(content);
      lnk.innerHTML = "Right-click + Save as to download zip file";
      lnk.download = "DemoZip.zip";
    });

};
// Just for this demo! keep separate array with filename or
// modify to allow for "filename-less" uris.
function getFilename(url) {
  return url.substr(url.lastIndexOf("/") + 1)
}

function zipit(e){
 reader.filename=e.files[0].name;
 reader.readAsArrayBuffer(e.files[0]);
}

</script>

</head>


<body>
<input id="browse" type="file" onchange="zipit(this)">
<br><a id=lnk></a>

 
</body>
</html>

前 後