React 打包下载图片，使用 jszip 压缩插件 和 file-saver 插件

1.需要使用 jszip 压缩插件 和 file-saver 插件

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

2.示例代码

import React from 'react';
import {Form} from 'antd';
import JSZip from 'jszip';
import saveAs from 'file-saver';
@Form.create()
class test extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
			"attachments":[
            {
                "code":"AT201910161509077555608",
                "bizCode":"CB332019101603201B",
                "category":"car_price",
                "kname":"second_car_report",
                "vname":"二手车评估报告",
                "attachType":"链接",
                "url":"123"
            },
            {
                "code":"AT201910161509078089453",
                "bizCode":"CB332019101603201B",
                "category":"credit_user",
                "kname":"id_no_front_apply",
                "vname":"申请人身份证正面",
                "attachType":"图片",
                "url":"321"
            },
            {
                "code":"AT201910161509078125842",
                "bizCode":"CB332019101603201B",
                "category":"credit_user",
                "kname":"id_no_reverse_apply",
                "vname":"申请人身份证反面",
                "attachType":"图片",
                "url":"456||0101||9191"
            },
            {
                "code":"AT201910161514331604968",
                "bizCode":"CB332019101603201B",
                "category":"credit_user",
                "kname":"local_residence_permit",
                "vname":"本地居住证",
                "attachType":"图片",
                "url":"654"
            }]
		};
    }
	// 打包下载
    downLoadBiz = () => {
        const {pageData} = this.state;
        let picList = [];
        pageData.attachments.map((item, index) => {
            if (!item.kname.match(/second_car_report/) && !item.kname.match(/video/) && item.url) {
                let picArr = item.url.split('||');
                let arr = [];
                for(let i = 0; i < picArr.length; i++) {
                    arr.push({
                        vname: i,
                        kname: item.kname,
                        url: picArr[i]
                    });
                }
                picList.push({
                    title: item.vname,
                    arr: arr
                });
            }
        });
        console.log(picList);
        let picArr = [];
        let laseTime = null;
        const hasMsg = message.loading('');
        picList.forEach((arrItem, i) => {
            picArr.push({title: arrItem.title, arr: []});
            if (arrItem.arr.length > 0) {
                arrItem.arr.forEach((item) => {
                    if (!item.kname.match(/video/) && item.url) {
                        const img = new Image();
                        img.crossOrigin = '';
                        img.width = 200;
                        img.height = 200;
                        img.onload = function () {
                            picArr[i].arr.push({
                                name: item.vname,
                                url: getBase64Image(img)
                            });
                            if (laseTime) {
                                clearTimeout(laseTime);
                            }
                            laseTime = setTimeout(() => {
                                hasMsg();
                                const ZIP = new JSZip();
                                picArr.forEach((arrItem) => {
                                    const file = ZIP.folder(arrItem.title);
                                    arrItem.arr.forEach(item => {
                                        if (item.url) {
                                            file.file(`${item.name}.png`,
                                                item.url, {base64: true});
                                        }
                                    });
                                });
                                ZIP.generateAsync({type: 'blob'}).then(
                                    function (content) {
                                        saveAs(content, '附件池.zip');
                                    });
                            }, 1000);
                        };
                        img.src = PIC_PREFIX + item.url;
                    } else {
                        return false;
                    }
                });
            }
        });
        function getBase64Image(img, width, height) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = width || img.width;
            canvas.height = height || img.height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            return convertBase64UrlToBlob(canvas.toDataURL('image/jpeg', 1));
        }
        function convertBase64UrlToBlob(urlData) {
            const arr = urlData.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while(n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type: mime});
        }
    };
}
export default ArchivesAddEdit;