Vue批量下载图片

需求

1. 点击列表中下载按钮实现下载单张图片
2. 复选框勾选，点击批量下载按钮，实现下载zip

实现

在页面的script中引入依赖：

import JSZip from 'jszip'
import FileSaver from 'file-saver'

批量下载图片弹窗中代码：

const tipTitle = ref<string>('')

// 获取文件blob
const getFile = (url: any) => {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            responseType: 'blob'
        })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.toString())
            })
    })
}

// 图片批量处理成压缩包后下载
const batchPictureZip = (data: any) => {
    const zip = new JSZip()
    const promises = []
    const cache = {}
    tipTitle.value = '正在加载压缩文件...'
    for (const item of data) {
        const promise = getFile(item.url).then(data => {
            // 下载文件, 并存成ArrayBuffer对象
            zip.file(item.fileName, data, { binary: true }) // 逐个添加文件
            cache[item.fileName] = data
        })
        promises.push(promise)
    }
    Promise.all(promises)
        .then(() => {
            zip.generateAsync({ type: 'blob' }).then((content: any) => {
            	tipTitle.value = '正在压缩...'
                // 生成二进制流
                FileSaver.saveAs(content, '文件名') // 利用file-saver保存文件  自定义文件名
                tipTitle.value = '压缩完成'
                ElMessage.success('下载成功')
            })
        })
        .catch(res => {
            ElMessage.warning('下载失败')
        })
}

// 提交
const onSubmit = () => {
    submitLoading.value = true
    let params = {
        clarityLevel: clarityLevel.value,
        recordIds: rowInfoArray.rowInfo?.map((item: any) => {
            return item.id
        })
    }
    downloadPicture(params)
        .then(res => {
            submitLoading.value = false
            dialogVisible.value = false
            if (res.data.length == 1) {
                // 下载单张图片
                let url = res.data[0].url
                let name = res.data[0].fileName
                FileSaver.saveAs(url, name)
            } else {
                // 批量下载图片
                batchPictureZip(res.data)
            }            
        })
        .catch(e => {
            submitLoading.value = false
        })
}