vue将文件图片批量打包下载zip

各种格式都可以,只要url能够打开或者下载文件即可.

1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip

步骤：

（1）安装依赖
   npm install jszip
   npm install file-saver

（2）在页面的script中引入依赖
   import JSZip from 'jszip'
   import FileSaver from 'file-saver'

（3）代码（完整代码）

<template>
  <div><button @click="handleBatchDownload">批量下载文件和图片</button></div>
</template>

<script>
// 导入依赖
import JSZip from "jszip";
import FileSaver from "file-saver";

export default {
  name: "fileUPload",
  methods: {
    handleBatchDownload() {
      let fileArr = [
        {
          fileUrl:
            "http://122.51.249.55:7005/upload/image/2022/06/1654346321493.png",
          fileName: "图片1",
        },
        {
          fileUrl:
            "http://122.51.249.55:7005/upload/image/2022/06/1654346321493.png",
          fileName: "图片2",
        },
      ];
      // 调用filesToRar函数  ( fileArr中的fileUrl是文件的完整路径)
      //filesToRar(参数1：文件数组形式[{fileUrl:文件url,fileName:文件名}]，参数2：压缩包名)
      this.filesToRar(fileArr, "图片和文件");
    },
    /**文件打包
     * arrImages:文件list:[{fileUrl:文件url,fileName:文件名}]
     * filename 压缩包名
     * */
    filesToRar(arrImages, filename) {
      let _this = this;
      let zip = new JSZip();
      let cache = {};
      let promises = [];
      _this.title = "正在加载压缩文件";
      for (let item of arrImages) {
        const promise = _this.getImgArrayBuffer(item.fileUrl).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.fileName, data, { binary: true }); // 逐个添加文件
          cache[item.fileName] = data;
        });
        promises.push(promise);
      }
      Promise.all(promises)
        .then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            _this.title = "正在压缩";
            // 生成二进制流
            FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
            _this.title = "压缩完成";
          });
        })
        .catch((res) => {
          _this.$message.error("文件压缩失败");
        });
    },
    //获取文件blob
    getImgArrayBuffer(url) {
      let _this = this;
      return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        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();
      });
    },
  },
};
</script>

<style></style>