一、依赖安转

• 打包工具

npm install file-saver --save
npm install jszip --save

二、函数封装

• 对图片进行处理

function getBase64Image(src) {return new Promise((resolve, reject) => {let canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const img = new Image();img.crossOrigin = 'Anonymous'; // 解决跨域问题img.onload = function() {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);const dataURL = canvas.toDataURL('image/png');const base64Data = dataURL.split(',')[1];resolve(base64Data);canvas = null; // 释放内存};img.onerror = (error) => {reject(error);};img.src = src;});
}

三、打包压缩

async function batchExportImages(urls, fileName = '图片文件夹', zipName = '图片压缩包', row = {}) {try {// 并行获取所有图片的 Base64 数据const base64Promises = urls.map((url) => getBase64Image(url));const base64Results = await Promise.all(base64Promises);// 创建 ZIP 压缩包const zip = new JSZip();const imgFolder = zip.folder(fileName);// 将每张图片添加到 ZIP 压缩包中base64Results.forEach((base64Data, index) => {imgFolder.file(`${row.handler || ''}-${row.mobile || ''}-${index + 1}.png`, base64Data, {base64: true});});// 生成 ZIP 文件并触发下载const zipBlob = await zip.generateAsync({type: 'blob'});FileSaver.saveAs(zipBlob, `${zipName}.zip`);} catch (error) {console.error('批量导出图片失败：', error);throw error; // 可以根据需要选择是否抛出错误}
}

四、应用

        downloadFile() {// 使用示例const urls = ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg','https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg','https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'];const row = {handler: '张三',mobile: '13800138000'};this.loading = true;batchExportImages(urls,,,row).then(() => {this.loading = false;console.log('图片批量导出成功');}).catch((error) => {this.loading = false;console.error('图片批量导出失败：', error);});}

五、示例图

• 链接: 转载