vue-element使用JSZip与FileSaver批量下载文件(任何格式的文件)_jszip filesave配合下载多个url

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

步骤:
第一步:

npm install JSZip 
npm install FileSaver 

然后在组件中引入

import JSZip from "jszip";
import FileSaver from "file-saver";

第二步:
创建一个function绑定点击事件
在浏览器中创建zip

//创建zip实例化对象
 const zip = new JSZip();
 //调用实例化的原型链function设置自定义解压目录文件名
 let imgsss = zip.folder('目录名');

第三步:
编写业务逻辑代码 批量导出一般都会拿到一个urlList处理
1.遍历urllist将url通过js原生对象new XMLHttpRequest() 创建一个请求实例 将url做为请求接口发出请求得到base64 bold格式的文档字符串(就是这个url的所有内容如文件大小 文件格式等数据)

2.截取第一个 , (逗号)之后的所有字符串已参数的形式插入zip.file(‘文件名’,base64参数)
3.在异步 zip.generateAsync中传入({type:blod})方法中.then拿到生成的二进制流,以参数的形式传入 FileSaver.saveAs(二进制流, '自定义压缩包名称'.zip) 这样批量导出就做好了

4.效果图

5.附上源码 技术栈 vue-element 咳咳:刚写完就来分享了 有强迫症的自己可以多封装几下 我后续自己的优化就不发了

<template>
  <el-form ref="formSave" :label-position="labelPosition" label-width="120px">
    <el-dialog :title="returnFile().title" :visible.sync="dialogFormVisible">
      <el-row class="marBom">
        <el-col
          :sm="12"
          :md="8"
          :lg="6"
          v-for="(item,index) of fileList"
          :key="index"
          class="itemMarBom"
        >
          <el-form-item :label="'是否导出'+returnFile().filterList(item.bookCategory)+':'">
            <el-radio-group v-model="item.yesOrNo">
              <el-radio :label="'y'">是</el-radio>
              <el-radio :label="'n'">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <updata :fileUrl="item.fileUrl" :IsShowView="false" />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :sm="12"></el-col>
      </el-row>
      <el-button type="primary" @click="handleExportFile" >一键下载全部文件</el-button>
    </el-dialog>
    <el-button type="primary" style="margin-top:40px;" @click="handleFlogt" :disabled="fileList.length==0">一键下载</el-button>
  </el-form>
</template>
<script>
import { getToken } from "@/api/axios";
import updata from "@/components/updata/updata";
import { deepClone } from "@/utils/index";
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      url: null,
      dialogFormVisible: false,
      fileList: [],
       labelPosition: "left",
    };
  },
  watch: {
    bookFileList: {
      deep: true,
      handler(list, ov) {
        this.fileList = deepClone(
          list.map(item => {
            item.select = "n";
            return item;
          })
        );
      }
    }
    // setbookFileList(list,nl){
    // console.log('list======')
    // console.log(list)
    // // this.fileList=list.map((item)=>{
    // // item.select=0
    // // return item
    // // })
    // }
    // }
  },
  props: {
    bookFileList: {
      type: Array
    },
    returnFile: {
      type: Function
    }
  },
  components: {
    updata
  },
  computed: {
    isShowBtn() {
      return true;
    }
  },
  methods: {
    handleExportFile() {


![img](https://img-blog.csdnimg.cn/img_convert/7893dd54421ed7866ae29c390d5fafdb.png)
![img](https://img-blog.csdnimg.cn/img_convert/165fbe89e8ef8c9dfaa4905c802efed6.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618679757)**

点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618679757)**