VUE批量打包下载文件

第一步，安装插件

npm install jszip
npm install file-saver

如果没有 axios ,则也需要安装一下

第二步，在所需要的页面引入依赖

import JSZip from'jszip'
import FileSaver from'file-saver'

如果axios 不是全局的，也得需要引入一下

第三步，下载文件 （定义在export default 上面）

const getFile = url => {
    return new Promise((resolve, reject) => {
        axios({
        method: "get",
        url,
        responseType: "arraybuffer"
        })
        .then(data => {
            resolve(data.data);
        })
        .catch(error => {
            reject("加载失败：" + error);
        });
    });
    // 这是另外一种，也可以试试
    // return new Promise((resolve, reject) => {
    //       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();
    // });
}

第四步，打包下载

export default {

    data() {
        return {
           
            fileOptios:[  
                { url:'这是文件地址',fileName:'外部账单填报应收模板.xlsx'},
                { url:'这是文件地址',fileName:'外部账单填报实收模板.xlsx' }
            ],
      
           
        };
    },
 
    methods: {
       //打包下载
        downFile(){  
             const zip = new JSZip()
             const promises = [];
             urlList.forEach(item => {
                  const promise = getFile(item.url).then(data => { // 下载文件, 并存成ArrayBuffer对象           
                   zip.file(item.fileName, data, { binary: true }) // 逐个添加文件
                })
              promises.push(promise)
             })
             Promise.all(promises).then(() => {
                   zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                     FileSaver.saveAs(content, "模板下载.zip") // 利用file-saver保存文件
                     })
              });
             }
    },
};