VUE图片下载 针对jpg格式的 单个下载图片 多个图片下载压缩包

          头部引入文件
            import JSZip from "jszip";
            import FileSaver from "file-saver";
            import AdminApi from "@/api/export";
            
      //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; } }
原文地址:https://www.cnblogs.com/xiaoxiao2017/p/15060536.html