引入jszip
jszip連結

<script src="./js/jszip.min.js"></script>

封裝方法

  // 打包下載
    function zip(imgList,specimenIdList) {
				      var zip = new JSZip();
				      // 建立images資料夾
					  for(var i= 0;i<specimenIdList.length;i++){
							console.log(specimenIdList.length)
							 for (let
 
 j = 0; j < imgList[i].length; j++) {
								 let ii = i
							   getBase64(imgList[i][j]).then(function (base64) {
								 imgFolder = zip.folder(specimenIdList[ii]);
							     base64 = base64.split('base64,')[1]
							     imgFolder.file(specimenIdList[ii]  + '-' + j +'.png', base64, {
							       base64:
 
 true
							     })
								if (ii===specimenIdList.length-1) {
									zip.generateAsync({
									  type: "blob"
									}).then((blob) => {
									console.log(01)
									  saveAs(blob, "fossilImg.zip")
									})
								}
							   }, function (err) {
							     console.
 
log(err); //列印異常資訊
							   });
							 }
					  } 
				    }
					
					function getBase64(img) {
					  function getBase64Image(img, width, height) { //width、height呼叫時傳入具體畫素值，控制大小 ,不傳則預設影象大小
					    var canvas = document.createElement("canvas");
					    canvas.width = width ? width : img.width;
					    canvas.height = height ? height : img.height;
									
					    var ctx = canvas.getContext("2d");
					    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					    var dataURL = canvas.toDataURL();
					    return dataURL;
					  }
					  var image = new Image();
					  image.crossOrigin = '*';
					  image.src = img;
					  var deferred = $.Deferred();
					  if (img) {
					    image.onload = function () {
					      deferred.resolve(getBase64Image(image)); //將base64傳給done上傳處理
					    }
					    return deferred.promise(); //問題要讓onload完成後再return sessionStorage['imgTest']
					  }
					}