• 安装jszip,file-saver

npm install file-saver 
npm install jszip

• 图片转成base64格式

export function getBase64Image(image, ext) {
    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 base64 = canvas.toDataURL(`image/${ext}`);
    base64 = base64.substring(base64.indexOf(',') + 1);
    return base64;
}

• 打包成压缩包

/**
 *
 * @param {*} urlList 图片列表
 * @param {*} filename 压缩包名称
 */
export function wrapImageToZip(urlList, filename) {
    let imageCount = urlList.length,
        numCount = 0,
        arrBase64 = [];

    urlList.map(item => {
        let url = `${item.url}?a=${new Date().getTime()}`,
            image = new Image();
        image.src = url;
        image.setAttribute('crossOrigin', '*');
        image.onload = function() {
            numCount++;
            let ext = url.substring(url.lastIndexOf('.') + 1, url.lastIndexOf('?')),
                base64 = getBase64Image(image, ext); //需要先将图片转换为base64
            arrBase64.push({ ext, base64 });
            if (numCount == imageCount) {
                Promise.all([require('jszip'), import('file-saver')]).then(([JSZip, FileSaver]) => {
                    let zip = new JSZip();
                    let img = zip.folder('');
                    for (let bItem of arrBase64.entries()) {
                        img.file(`${bItem[0]}.${bItem[1].ext}`, bItem[1].base64, { base64: true });
                    }
                    // 图片是base64格式,但不要base64前缀
                    let fileName = `${filename}.zip`;
                    zip.generateAsync({ type: 'blob' }).then(function(content) {
                        // see FileSaver.js
                        FileSaver.saveAs(content, fileName);
                    });
                });
            }
        };
    });
}

• 页面中使用

<template>
      <el-button type="text" @click="downCom">下载图片</el-button>
</template>
<script>
import { wrapImageToZip } from '@/utils';
export default{
    data (){
      return{
        files: [ {url: 'https://xxxx.jpg', fileName: '图片1'}, {url: 'https://xxxx.jpg', fileName: '图片2'}]
      }
    },
    methods: {
      downCom(){
        wrapImageToZip(this.files, '压缩包名称')
      }
    }
}
</script>