前端html实现多文件打包并下载

前端html实现多文件打包并下载

最近公司有这样的需求,上网百度一下后,还是找到了方法

用到的插件axios,FileSaver,jszip

axios不用解释了,发请求的插件,重点是后面两个

1.FileSaver

这是一个用来保存各种媒体文件的插件

2.jszip

这是用来打包压缩文件的

   getFile = (url) => {
            return new Promise((resolve, reject) => {
                axios({
                    method: 'get',
                    url,
                    responseType: 'arraybuffer'
                }).then(data => {
                    resolve(data.data)
                }).catch(error => {
                    reject(error.toString())
                })
            })
        };
        // 批量下载
        handleBatchDownload = async (selectImgList) => {
            const data = selectImgList;
            const zip = new JSZip()
            const cache = {}
            const promises = []
            await data.forEach((item, index) => {
                const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                    const arr_name = item.split("/"); //截取文件名
                    let file_name = arr_name[arr_name.length - 1] // 获取文件名
                    zip.file(file_name, data, {
                        binary: true
                    }) // 逐个添加文件
                    cache[file_name] = data
                })
                // 在zip里面添加一个txt
                if(index == data.length-1){
                    zip.file("Hello.txt", "Hello World");
                }
                promises.push(promise)
            })
            Promise.all(promises).then(() => {
                zip.generateAsync({
                    type: "blob"
                }).then(content => { // 生成二进制流
                    saveAs(content, "photo11.zip") // 利用file-saver保存文件
                })
            })

        };

接下来调用方法传入数组就ok啦

补充一些

如果想要在里面添加文件夹的话可以:

// 创建一个名为images的新的文件目录
var img = zip.folder("images");
// 这个images文件目录中创建一个base64数据为imgData的图像，图像名是smile.gif
img.file("smile.gif", imgData, {base64: true});

当然,如果你的文件名为"/目录/aa.txt"这种格式的话,它会默认帮你生成一个名叫"目录"的文件夹,并把aa.txt下载放入里面,如果后续有文件也需要放在这个目录,也可以把名称改成"/目录/bb.txt"这样