vue2,vue3下载多个文件打成压缩包

1.需要两个依赖

npm i jszip

npm i file-saver

2.引入

import JSZip from "jszip";

import FileSaver from "file-saver";

3.封装方法（多个文件下载），页面调用即可

/**
 * 下载文件 传数组  实例：[{url:www.123.jpg,name:'123.jpg'}]   url：文件网络路径，name：文件名字
 * @param {*} fileList 
 */
export function $downLoadFile(fileList) {
    const zip = new JSZip()
    const promises = []
    fileList.forEach((item, index) => {
        const promise = getFile(item.url).then((data) => {
            zip.file(item.name, data, { binary: true })//文件名、文件流、是否为二进制
        })
        promises.push(promise)
    })
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then((content) => {
            //利用file-saver保存文件  自定义文件名
            FileSaver.saveAs(
                content,
                new Date().getTime()
            )
        })
    }).catch((err) => {
        $message.error('文件压缩失败')
    })

}
function getFile(url) {
    return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () {
            if (this.status == 200) {
                resolve(this.response);
            } else {
                reject(this.status);
            }
        }
        xmlhttp.send();
    });
}

4.封装方法（单个文件下载），页面调用即可

/**
 * 单个下载文件
 * @param {*} url 
 */
export function $downloadimg(urls, fileName) {
    const a = document.createElement('a')
    a.href = urls
    a.download = fileName // 下载后文件名
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click() // 点击下载
    document.body.removeChild(a) // 下载完成移除元素

}