VUE+jszip如何实现下载多个文件导出为一个zip格式

 更新时间:2024年03月08日 09:32:05   作者:前端小小白~  
这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

VUE+jszip下载多个文件导出为一个zip格式

项目需求:

将多个文件/图片导出为一个zip格式压缩包,点击<下载全部附件>按钮下载上面三个文件

1、安装jszip和file-saver插件

npm install jszip
npm install file-saver

2、在所需页面引入

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

3、模拟fileList数组

//fileList模拟文件数组
  export default {
    name: "notice-list",
    data() {
      return {
	      fileList: [
	      {
	        fileName: '3.jpg',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      },
	      {
	        fileName: '5.jpg',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      },
	      {
	        fileName: '测试2.doc',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      }
	    ],
      }
    }
}

4、在methods中定义方法

     // 下载全部附件   downloadBtn<下载全部附件>按钮绑定事件
      downloadBtn() {
        var blogTitle = `全部附件`; // 下载后压缩包的名称
        var zip = new JSZip();
        var promises = [];
        let cache = {};
        for (let item of this.fileList) {
          // item.feilePath为文件链接地址
          // item.fileName为文件名称
          if(item.feilePath) {
            const promise = this.getImgArrayBuffer(item.feilePath).then((data) => {
              // 下载文件, 并存成ArrayBuffer对象(blob)
              zip.file(item.fileName, data, { binary: true }); // 逐个添加文件
              cache[item.fileName] = data;
            });
            promises.push(promise);
          } else {
          // feilePath地址不存在时提示
            alert(`附件${item.fileName}地址错误,下载失败`);
          }
        }
        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  blogTitle:自定义文件名
          });
        }).catch((res) => {
          alert("文件压缩失败");
        });
      },
      //文件以流的形式获取(参数url为文件链接地址)
      getImgArrayBuffer(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();
        });
      },

5、复制粘贴可用

看过其它教程有一部分版本都是存在错误的,所以修改了一部分

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex中使用对象展开运算符的示例

    vuex中使用对象展开运算符的示例

    本篇文章主要介绍了vuex中使用对象展开运算符的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue登录以及权限验证相关的实现

    vue登录以及权限验证相关的实现

    这篇文章主要介绍了vue登录以及权限验证相关的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue.nextTick纯干货使用方法详解

    Vue.nextTick纯干货使用方法详解

    这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 深入探索Vue中样式绑定的七种实现方法

    深入探索Vue中样式绑定的七种实现方法

    在 Vue.js 开发中,合理地控制元素的样式对于构建高质量的用户界面至关重要,Vue 提供了灵活的方式来绑定样式,这篇文章将探索 Vue 中设置样式的七种做法,并结合代码,逐步说明每种方法的实现,需要的朋友可以参考下
    2024-03-03
  • Vue配合Vant使用时area省市区选择器的使用方式

    Vue配合Vant使用时area省市区选择器的使用方式

    这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue中插槽slot的使用示例详解

    Vue中插槽slot的使用示例详解

    这篇文章主要介绍了Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • vue中使用swiper5方式

    vue中使用swiper5方式

    这篇文章主要介绍了vue中使用swiper5方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue实现选中文本弹出弹窗功能的完多种方法

    Vue实现选中文本弹出弹窗功能的完多种方法

    在现代 Web 应用中,选中文本后显示相关操作或信息是一种常见的交互模式,本文将详细介绍如何在 Vue 中实现选中文本后弹出弹窗的功能,包括其工作原理、多种实现方式以及实际项目中的应用示例,需要的朋友可以参考下
    2025-09-09
  • vant组件表单外部的button触发form表单的submit事件问题

    vant组件表单外部的button触发form表单的submit事件问题

    这篇文章主要介绍了vant组件表单外部的button触发form表单的submit事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue使用wangeditor创建富文本编辑器的完整指南

    Vue使用wangeditor创建富文本编辑器的完整指南

    WangEditor是一个开源的富文本编辑器,由阿里云开发,它提供了一套简洁易用的API和丰富的功能,如拖拽上传图片、插入表格、自定义表情等,适用于网页和移动应用中的内容编辑场景,本文介绍了Vue使用wangeditor创建富文本编辑器的完整指南,需要的朋友可以参考下
    2024-08-08

最新评论