前端多个文件批量下载进行打包

先上代码

   $('a[id^="budgetOneN"]').each(function() {
           $(this).click(function() {
               downZip($(this));//给每个a标签加事件
           });

       });
       const getFile = url => {
           return new Promise((resolve, reject) => {
           axios({
           method:'get',
           url,
           responseType: 'arraybuffer'
           }).then(data => {
           resolve(data.data)
           }).catch(error => {
           reject(error.toString())
           })
           })
           }
       function downZip(ele){
           var array =new Array();
           var arrayTwo =new Array();
           var url =$(ele).attr("value");//路径
           var name=$(ele).attr("date");//显示打包名称
           alert(name);
           array = url.split(',');
           for(var i =0;i<array.length;i++){
               arrayTwo[i] =array[i].substring(array[i].indexOf("&")+1);
           }
           handleBatchDownload(array,arrayTwo,name);
       }



       function handleBatchDownload(array,arrayTwo,name) {
           const data = array; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
           const zip = new JSZip();
           const cache = {};
           const promises = [];
           data.forEach(item => {
           const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
           const arr_name = item.split("/");
//            const arr_name =arr_name.substring(arr_name.indexOf("&")+1);
           var file_name = arr_name[arr_name.length - 1] // 获取文件名
           file_name = file_name.substring(file_name.indexOf("&")+1,file_name.length-1);
           zip.file(file_name, data, { binary: true }) // 逐个添加文件
           cache[file_name] = data
           })
           promises.push(promise)
           })
           Promise.all(promises).then(() => {
           zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
           saveAs(content, ""+name+".zip") // 利用file-saver保存文件
           })
           })
           }
运用vue.js

所运用的js

前端页面：

前端多个文件批量下载进行打包

文件下载同时通过代码直接打包。

DEMO下载地址：https://dwz.cn/Jw3z6fVq

秒客网

前端多个文件批量下载进行打包

相关文章