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

先上代码

    $('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

<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>
    <script src="http://stuk.github.io/jszip/dist/jszip.js"></script>
 
    <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils-ie.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
后台不用改就可以啦。

前端页面：

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

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