vue 打包下载多层zip文件

 

 

npm install jszip
npm install file-saver
import JSZip from "jszip";
import FileSaver from "file-saver";
import {Message} from "view-design";

/**
 * 下载文件 传数组
 * fileList
 * [
 *   {
 *     type:'file',
 *     name:'17034953113790548.png',
 *     url:'https://zwdev.oss-cn-beijing.aliyuncs.com/company_1/default/17034953113790548.png',
 *   },
 *   {
 *     type:'folder',
 *     name:'图片',
 *     children:[
 *       {
 *         type:'file',
 *         name:'17034953113790548.png',
 *         url:'https://zwdev.oss-cn-beijing.aliyuncs.com/company_1/default/17034953113790548.png',
 *       },
 *     ]
 *   }
 * ]
 * @param {*} fileList
 * @param fileName //zip文件名称 默认时间戳
 */

export function downLoadZip(fileList, fileName = new Date().getTime()) {
  const zip = new JSZip()
  const promises = []
  fileList.forEach((item, index) => {
    if (item.type === 'folder') {
      let promiseFolder = zip.folder(item.name)//文件夹名
      if (item.children && item.children.length > 0) {
        item.children.forEach((file, ii) => {
          let promise = getFile(file.url).then((data) => {
            promiseFolder.file(file.name, data, {binary: true})//文件名、文件流、是否为二进制
          })
          promises.push(promise)
        })
      }
    } else if (item.type === 'file') {
      let promise = getFile(item.url).then((data) => {
        zip.file(item.name, data, {binary: true})//文件名、文件流、是否为二进制
      })
      promises.push(promise)
    }
  })
  Promise.all(promises).then(() => {
    zip.generateAsync({type: 'blob'}).then((content) => {
      //利用file-saver保存文件  自定义文件名
      FileSaver.saveAs(content, fileName)
    })
  }).catch((err) => {
    Message.error({content: '文件压缩失败' + err})
  })

}

function getFile(url) {
  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();
  });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/363009.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu22.04@laptop安装配置VNC服务端

ubuntu22.04laptop安装&配置VNC服务端 1. 源由2. 系统安装3. VNC安装3.1 系统更新3.2 lightdm安装3.3 x11vnc安装3.4 x11vnc配置3.5 x11vnc自启动3.6 x11vnc状态查询 4. 演示视频5. 附录 - “Failed to start x11vnc service.” 1. 源由 最近系统搞TensorFlow, OpenCV, Py…

免费的ppt网站分享

前言 相信大学生们深有体会,对于学校而言,好像是任何活动都需要我们做ppt,当你拿着自己辛苦做的ppt去展示现场的时候,你看到别人的ppt比你的还好,此时心情就是毙,当你知道人家不过是仅仅的1个小时不到就完成…

本地搭建Plex私人影音网站并结合内网穿透实现公网远程访问

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【数据库数据恢复】Oracle数据库ASM磁盘组数据恢复案例

oracle数据库故障&分析: oracle数据库ASM磁盘组掉线,ASM实例不能挂载。数据库管理员尝试修复数据库,但是没有成功。 oracle数据库数据恢复过程: 1、将oracle数据库所涉及磁盘以只读方式备份。后续的数据分析和数据恢复操作都…

QT中QComboBox添加点击事件,实现下拉框自动刷新

因为项目需要,在QT中的ui界面添加QComboBox控件,需求是实现控件的点击事件,查了资料,发现这个控件类的本身是没有点击信号可以使用的。 但是QT是基于C的面向对象,有了这个特点,我们就可以继承原来的类&…

QSS样式表简单梳理记录

1.带namespace的类,样式表写法: // 命令空间LW,类名Demo LW--Demo {background-color: rgba(0, 0, 0, 0.5); } 2.带状态的类,样式表写法: // 类名Demo,状态current Demo[current"true"] {back…

Java基础 集合(二)List详解

目录 简介 数组与集合的区别如下: 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波,它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…

Redis 布隆过滤器

布隆过滤器 这一篇文章主要是记录布隆过滤器的使用和认识 主要参考了如下的blog https://blog.csdn.net/weixin_42972832/article/details/131211665 他讲的还不错 简单的来说,布隆过滤器,实际上就像是一个集合,拿redis的key来举例来说,布隆过滤器的设置就是去过滤不属于redi…

static 成员函数

在书上看到这样一段话 ”在引入static 成员函数之前,C语言要求所有的成员函数都必须经由该 class 的对象来调用。而实际上,只有当一个或多个 nonstatic 数据成员在成员函数中被直接存取时,才需要 class 的对象。class 对象提供了 this 指针来…

C#版字节跳动SDK - SKIT.FlurlHttpClient.ByteDance

前言 在我们日常开发工作中对接第三方开放平台,找一款封装完善且全面的SDK能够大大的简化我们的开发难度和提高工作效率。今天给大家推荐一款C#开源、功能完善的字节跳动SDK:SKIT.FlurlHttpClient.ByteDance。 项目官方介绍 可能是全网唯一的 C# 版字…

C语言简介

Visual Studio编辑器左侧菜单栏不小心关掉如何打开(左侧解决方案资源管理器不显示如何打开)、C语言中int main和void main的区别以及C工程的创建_visual studio2022 资源管理器怎么打开桌面面板-CSDN博客 目录 ​编辑 1. 简介 2. 介绍 3. C程序 …

保姆式挑选钢化膜教程,不看真的后悔

覆盖率 我们怎样挑选钢化膜呢?选手机膜最重要的是看它的覆盖率,所谓覆盖就是手机膜覆盖住你的手机屏幕,一般覆盖率达到 97% 左右,几乎就感受不到膜的存在。 很多朋友应该听说过 2D 钢化膜,它是没有经过边缘抛光处理的…

Django部署到服务器后无法获取到静态元素 The requested resource was not found on this server

问题描述 写了一个Django项目,部署到云主机后,访问发现图片无法访问,报错The requested resource was not found on this server 图片是一个词云图,根据爬虫爬取的信息生成的,根据爬取的信息会改变,所以没…

负责任的老师都具备哪些特点

选择成为一名教师时,就承诺要为学生提供最好的教育。但是,什么是最好的教育呢?我认为,一个负责任的老师应该具备以下几个特点: 了解学生 作为老师,我们首先要了解自己的学生。每个学生都是独特的个体&…

研究近期的伦敦银走势图 有什么特别要注意的?

对伦敦银走势图进行分析,这是我们入场交易之前要做的必要准备。没有对伦敦银走势图的充分分析和了解,投资者不应该入场。下面我们就来讨论一下,要对近期的伦敦银走势图进行分析,我们要注意什么。 研究美联储的动向。从上周开始&am…

UE4 C++ UGameInstance实例化

1.创建GameInstance C类 2.在.h添加变量 class 工程名称_API UMyGameInstance : public UGameInstance {GENERATED_BODY()public: //定义了三个公开的变量UMyGameInstance();UPROPERTY(EditAnywhere, BlueprintReadWrite, Category "MyGameInstance")FString Name…

回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向…

HarmonyOS4.0系统性深入开发33相对布局(RelativeContainer)

相对布局(RelativeContainer) 概述 RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个…

python数据类型-列表

1 python中列表的定义 python中列表是一种有序和可更改的集合,允许重复的成员,列表中的元素之间数据类型可以不同(元素之间数据类型可以不相同,这一点和其它的面向对象的开发语言有很大的不同,如C#、Java)…

如何本地搭建Emby影音管理服务并结合内网穿透实现远程访问本地影音库

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中,观看视频绝对是主力应用场景之一&…