Jquery Zip files - JackHu88/Comm GitHub Wiki

<script type="text/javascript" src="../SiteAssets/js/jszip.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/jszip-utils.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../SiteAssets/js/jszip-utils-ie.min.js"></script>
<![endif]-->
<script type="text/javascript" src="../SiteAssets/js/FileSaver.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/q.js"></script>
<script>
//zip.file(o.filename, arrayBuffer);
/*zip.generateAsync({type:"blob"})
.then(function (blob) {
    saveAs(blob, "hello.zip");
});*/

window.onload=function(){

var downloadFile = function(url) {
  var defer = Q.defer();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status < 400) {
        defer.resolve(xhr.response);
      } else {
        defer.reject(new Error("Failed to load file from server"));
      }   
    }   
  };  
  xhr.send();

  return defer.promise;
};

var files = [{filename: 'CSS權威指南.pdf', url: '/sites/dev/Shared Documents/CSS權威指南.pdf'}, {filename: '高性能javascript.pdf', url: '/sites/dev/Shared Documents/高性能javascript.pdf'}],
zip = new JSZip();


// loading a file and add it in a zip file
JSZipUtils.getBinaryContent("/sites/dev/Shared Documents/CSS權威指南.pdf", function (err, data) {
   if(err) {
      throw err; // or handle the error
   }
   zip.file("CSS權威指南.pdf", data, {binary:true});
   zip.generateAsync({type:"blob"})
	.then(function (blob) {
	    saveAs(blob, "myzip.zip");
	});
});

/*files.reduce(function(p, o) {
  return p.then(function() {
    return downloadFile(o.url).then(function(arrayBuffer) {
      zip.file(o.filename, arrayBuffer);
    });
  })
}, Q()).then(function() {  
	zip.generateAsync({type:"blob"})
	.then(function (blob) {
	    saveAs(blob, "myzip.zip");
	});
  
});*/

}
</script>

<script type="text/javascript" src="../SiteAssets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/fetch.js"></script>
<script type="text/javascript" src="../SiteAssets/js/es6-promise.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/pnp.min.js"></script>


<script type="text/javascript" src="../SiteAssets/js/jszip.min.js"></script>
<script type="text/javascript" src="../SiteAssets/js/FileSaver.min.js"></script>

<script type="text/javascript">
    $pnp.setup({
        headers: {
            "Accept": "application/json; odata=verbose"
        }
    });
	var zip = new JSZip();
	$(function(){
		$("#download").click(function(){	
			/*$pnp.sp.web.getFileByServerRelativeUrl("/sites/dev/Shared Documents/CSS權威指南.pdf").getBuffer().then(data=>{
				zip.file("CSS權威指南.pdf", data, {binary:true});
				zip.generateAsync({type:"blob"})
				.then(function (blob) {
				    saveAs(blob, "myzip.zip");
				});
			})*/
			downloadFiles();
		})
		
		function downloadFiles(){			
			var files = [{filename: 'CSS權威指南.pdf', url: '/sites/dev/Shared Documents/CSS權威指南.pdf'}, {filename: '高性能javascript.pdf', url: '/sites/dev/Shared Documents/高性能javascript.pdf'}];
			var arr=[];
			for(i=0;i<files.length;i++){
				arr.push(downloadFile(files[i]));
			}
			Promise.all(arr).then(function(value){
			    console.log(value); // 打印[1,2]
			    zip.generateAsync({type:"blob"})
				.then(function (blob) {
				    saveAs(blob, "myzip.zip");
				});
			});
		}
		
		function downloadFile(file){
			return new Promise(function(resolve){
				//Read a file to the SharePoint Library	
				//getBlob()
				//getText()		
					 
				 $pnp.sp.web.getFileByServerRelativeUrl(file.url).getBuffer().then(data=>{
					document.getElementById("sample").innerHTML += file.filename+ " downloaded successfully! <br/>"
					zip.file(file.filename, data, {binary:true});
					resolve(zip);					
				})

				 
			});
		}

	})
	
   
</script>