VUE2 批量下載文件，保存為zip

本文章是利用jszip和file-saver，將文件逐个压缩后，生成二进制流，利用file-saver保存文件，文件名自定义，废话不多说，开干！

一、Html

<el-button type="text" @click="handleBatchdownload()">
     <i class="el-icon-download" style="padding-right: 2px;font-size: 16px;"></i>批量下載
</el-button>

二、JS：

1. 安装jszip和file-saver第三方包

 npm install jszip
 npm install file-saver

2.引入包

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

3.编写函数handleBatchdownload

批量下载前确认提示,此处用this.multipleSelection为数据来源（el-table多选事件，不过多赘述，自行查看官方文档）

handleBatchdownload() {
    if(this.multipleSelection.length==0) return     
    this.$message.warning('请勾选需要下载的文件')
        this.$confirm('确定要下载全部文件?', '确认下载', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.batchDownload(); //用jszip和file-saver第三方包
        }).catch(() => {})
    },

压缩转二进制流函数  this.batchDownload()

batchDownload() {
    const zip = new JSZip();
    // 下载后压缩包的名称
    const blogTitle = 'file.zip' 
    const cache = {};
    const promises = [];
    this.multipleSelection.forEach(item => {
        if (item.fileId) {
            var url = this.fileBaseUrl + '/download/' + item.fileId
            const promise = this.getFile(url).then(data => {
            // *下载文件, 并存成ArrayBuffer对象
                 const arr_name = item.fileName.split("/");
                 const file_name = arr_name[arr_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", compression: 'DEFLATE',  // *STORE: 默认不压缩; DEFLATE：需要压缩
            compressionOptions: {
                level: 9 // *压缩等级 1~9。1: 压缩速度最快，9: 最优压缩方式
            }
        }).then(content => {
            saveAs(content, blogTitle); // *生成二进制流，利用file-saver保存文件，文件名自定义
        });
    });
},

获取文件blob格式 并下载  getFile（）

  getFile(url) {
      return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () {
          if (xmlhttp.status == 200) {
            resolve(xmlhttp.response);
          } else {
            reject(xmlhttp.response);
          }
        };
        xmlhttp.send();
      });
    }

结果