vue项目 前端js实现根据文件url批量压缩下载成zip包

?

1	1.npm install jszip --save / yarn add jszip -S

2.npm install file-saver --save / yarn add file-saver -S 

3.yarn add axios

?

1

以下为完整代码

 

<template>
  <div class="hello">
    <div>
      <Button @click='downLoad'>批量打包下载文件</Button>
    </div>
  </div>
</template>

<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  data() {
    return {
    }
  },
  methods: {
    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "blob"
        }).then(data => {
          resolve(data.data);
        }).catch(error => {
          reject(error.toString());
        });
      });
    },
    downLoad() {
      const data = ["url1","url2"]; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach(item => {
        const promise = this.getFile(item).then(data => {
          // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.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 => {
          // 生成二进制流
          FileSaver.saveAs(content, "RobotInformation.zip"); // 利用file-saver保存文件  自定义文件名
        });
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>