vue 批量下载图片（自动压缩之后下载）
标题 vue 批量下载图片（自动压缩之后下载）
效果图：
之前写的时候找到的别人的方法 觉得很好用 就保存下来之后改造了一下 亲测有效：
话不多说直接代码：
html代码：
el-table-column>:label="$t('abnormalList[9]')"show-overflow-tooltip><template slot-scope="scope"><span class="downloadImg"@click="handleDownloadQrIMg(scope.row)">图片下载span>template>el-table-column>//先下载两个插件
npm install jszip --S --D
npm install file-saver --S --D
或者用yarn add 这两个也是一样的效果
在文件中引入插件
import JSZip from "jszip";
import FileSaver from "file-saver";//data中加一个imgList: []
//方法中写入 主要内容
// 批量下载图片handleDownloadQrIMg(row) {//每次进来清空数组 否则会出现上一次图片不清空的问题this.imgList = []//把5张图片传进来let imageList = [row.img1, row.img2, row.img3, row.img4, row.img5];imageList.forEach((item) => {if (item != "") {this.imgList.push(item);}});//压缩包名var blogTitle = "打包图片";var zip = new JSZip();var imgs = zip.folder(blogTitle);var baseList = [];// 要下载图片的urlvar arr = this.imgList;// 下载后图片的文件名，个数应与arr对应var imgNameList = ["图片1", "图片2", "图片3", "图片4", "图片5"];for (var i = 0; i < arr.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 === arr.length && baseList.length > 0) {for (let k = 0; k < baseList.length; k++) {imgs.file(imgNameList[k] + ".png", baseList[k], { base64: true });}zip.generateAsync({ type: "blob" }).then(function (content) {// see FileSaver.jsFileSaver.saveAs(content, blogTitle + ".zip");});}};image.src = arr[i];}//下载单张图片// var link = document.createElement("a");// link.download = 'aaa'; //图片文件名// link.href = row.img1 //文件地址// link.click();// link.remove();},之前在这里看到的之后用到自己的代码中：
链接: https://www.jb51.net/article/197884.htm
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！