JSZip + FileSaver 实现Vue打包下载图片

淡淡的烟草味﹌ 2022-10-19 04:21 259阅读 0赞

### 1. 版本 ###

"file-saver": "^2.0.5",  
"jszip": "^3.6.0"

### 2. 实现 ###

import FileSaver from 'file-saver';
    import JSZip from 'jszip';
    export default class exportUtils {
    	/**
    	 * 前端 打包下载图片
    	 * @param {*} source Map
    	 * 例如:
    	 * {
    	 *     "测试导出1": [
    	 *         {
    	 *             "name": "图片名称1",
    	 *             "url": "http://123.jpg"
    	 *         }
    	 *     ],
    	 *     "测试导出2": [
    	 *         {
    	 *             "name": "图片名称2",
    	 *             "url": "http://456.jpg"
    	 *         }
    	 *     ]
    	 * }
    	 *
    	 * @param {*} zipName  文件名 如: '压缩文件' 不需要加扩展名(.zip)
    	 * */
    	static downloadZipByImageUrlMap(source, zipName) {
    		console.log('开始打包');
     
    		let doneCache = new Map();
    		let zip = new JSZip();
    		for (let dirName of source.keys()) {
    			let fileList = source.get(dirName);
    			let base64List = [];
    			// 缓存已经加载完成的图片base64
    			doneCache.set(dirName, base64List);
     
    			for (let file of fileList) {
    				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);
     
    					// 得到图片的base64编码数据
    					let url = canvas.toDataURL();
    					canvas.toDataURL('image/png');
     
    					// 去掉base64编码前的 data:image/png;base64,
    					base64List.push({
    						name: file.name,
    						base64: url.substring(url.indexOf(',') + 1)
    					});
     
    					// 判断图片是否全部加载完成
    					let ready = true;
    					for (let key of source.keys()) {
    						if (doneCache.get(key) === undefined || doneCache.get(key).length < source.get(key).length) {
    							ready = false;
    							break;
    						}
    					}
     
    					if (ready) {
    						console.log('开始下载');
     
    						for (let key of doneCache.keys()) {
    							let imageList = doneCache.get(key);
    							let imgDir = zip.folder(key);
    							for (let k = 0; k < imageList.length; k++) {
    								if (imageList[k].base64 === null) {
    									continue;
    								}
    								imgDir.file(imageList[k].name + '_' + k + '.png', imageList[k].base64, {base64: true});
    							}
    						}
     
    						zip.generateAsync({type: 'blob'}).then(function (content) {
    							FileSaver.saveAs(content, zipName + new Date().getTime() + '.zip');
    						});
    					}
    				};
    				image.onerror = function () {
    					// 图片加载失败处理方法
    					for (let dieName of source.keys()) {
    						let tmpBase64List = doneCache.get(dieName);
    						for (let file of source.get(dieName)) {
    							if (image.currentSrc === file.url) {
    								tmpBase64List.push(file);
    							}
    						}
    						doneCache.set(dieName, tmpBase64List);
    					}
    				};
    				image.src = file.url;
    			}
    		}
    	}
    }

### 3. 参考 ###

[https://blog.csdn.net/qq\_42157868/article/details/107368156][https_blog.csdn.net_qq_42157868_article_details_107368156]

[https://blog.csdn.net/qq\_43258252/article/details/85063970][https_blog.csdn.net_qq_43258252_article_details_85063970]

[https_blog.csdn.net_qq_42157868_article_details_107368156]: https://blog.csdn.net/qq_42157868/article/details/107368156
[https_blog.csdn.net_qq_43258252_article_details_85063970]: https://blog.csdn.net/qq_43258252/article/details/85063970