前端js批量打包下载文件或图片jszip与FileSaver

最新推荐文章于 2024-07-19 11:18:50 发布

admin_vip

最新推荐文章于 2024-07-19 11:18:50 发布

阅读量1.5k

点赞数

分类专栏： js批量下载文件与图片文章标签： js 前端

本文链接：https://blog.csdn.net/qq_35513303/article/details/115857489

版权

js批量下载文件与图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//需要引入 jszip.js 与 FileSaver.js、es6-promise.auto.min.js

//imgList:文件路径数组 userName:自定义压缩包名称
var zip = new JSZip();
var cache = {};
var promises = [];
var imgList = []; //需要下载的文件路径
var userName = "下载的压缩包名称";
for (var i = 0; i < imgList.length; i++) {
    var name = i;
    var promise= getImgArrayBuffer(Common.ctxPath + imgList[i]).then(function (data){
        // 下载文件, 并存成ArrayBuffer对象(blob)
        var format = data.type.substring(data.type.lastIndexOf("/") + 1,data.type.length);
        if(format.indexOf("word") >= 0){ //因为word文件返回的不是其格式名称  所以作相应的处理
            format = "doc";
        }
        name ++;
        zip.file(name + "." + format, data, { binary: true }); // 逐个添加文件
        cache[name + "." + format] = data;
    });
    promises.push(promise);
}
Promise.all(promises).then(function () {
    zip.generateAsync({ type: "blob" }).then(function (content) {
        // 生成二进制流
        saveAs(content, userName + '.zip'); // 利用file-saver保存文件  自定义文件名
    });
}).catch(function (res){
    alert('下载信息失败！');
});

function getImgArrayBuffer(url){
    return new Promise(function (resolve, reject) {
        //通过请求获取文件blob格式
        var 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();
    });
}