1. 程式人生 > 其它 >VUE圖片下載 單個下載圖片 多個圖片下載壓縮包

VUE圖片下載 單個下載圖片 多個圖片下載壓縮包

         //res.data   介面獲取到的資料
      if
(res.data.length == 1) {//單個下載圖片 let data = `${this.$moment(new Date()).format('YYYY-MM-DD')}` //下載檔名字以時間命名 var image = new Image(); // 解決跨域 Canvas 汙染問題 image.setAttribute("crossOrigin", "anonymous"); image.onload
= function () { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到圖片的base64編碼資料 var a = document.createElement("a"); // 生成一個a元素 var event = new MouseEvent("click"); // 建立一個單擊事件 a.download = data + '_1' || "photo"; // 設定圖片名稱 a.href = url; // 將生成的URL設定為a.href屬性 a.dispatchEvent(event
); // 觸發a的單擊事件 };
       //單個圖片下載路徑 image.src
= res.data[0].filePath; } else {//多個資料夾裡面包含圖片 let blogTitle = "電子發票"; //資料夾名 let zip = new JSZip(); let imgs = zip.folder(blogTitle); let baseList = [];
       //下載的資料及格式整理 let arr
= res.data; let exportImg = arr.map((item, index) => {//陣列物件 return { name: `${this.$moment(new Date()).format('YYYY-MM-DD')}_${index + 1}`, //檔名字 images: item.filePath,//檔案連結 }; }) this.imgLoading = false; for (let i = 0; i < exportImg.length; i++) { let image = new Image(); // 解決跨域 Canvas 汙染問題 image.setAttribute("crossOrigin", "anonymous"); image.onload = function () { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; let context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); let url = canvas.toDataURL(); // 得到圖片的base64編碼資料 canvas.toDataURL("image/png"); baseList.push(url.substring(22)); // 去掉base64編碼前的 data:image/png;base64, if (baseList.length === exportImg.length && baseList.length > 0) { for (let k = 0; k < baseList.length; k++) { imgs.file(exportImg[k].name + ".png", baseList[k], { base64: true, }); } zip.generateAsync({ type: "blob" }).then(function (content) { FileSaver.saveAs(content, blogTitle + ".zip"); // see FileSaver.js }); } }; image.src = exportImg[i].images; } }