当前位置: 首页 > backend >正文

前端批量下载文件打包为zip

多文件需要一次性下载为zip文件

这是近期遇到的一个需求,本身是多文件上传的,下载时单个下载太慢又繁杂,用户希望能一次性批量下载,就选择了jszip

import axios from "axios"
import JSZip from "jszip"
import FileSaver from "file-saver"const getFile = url => {return new Promise((resolve, reject) => {axios({headers: {'Cache-control': 'no-cache'},method: "get",url,responseType: "arraybuffer"}).then(data => {resolve(data.data)}).catch(error => {reject(error)})})
}const downloadFromAliOss = function (fileArr, zipName) {const zip = new JSZip()const promises = []fileArr.forEach(item => {const promise = getFile(item.url).then(data => {const url = new URL(item.url)// 获取文件类型// const type = url.pathname.split('.').pop() // 'jpg'// const typeArr = item.url.split(".")// const type = typeArr[typeArr.length - 1]// 默认文件名·// const nameArr = item.url.split("/")const name = item.name || url.pathname.split('/').pop()// const foldPath = item.foldPath || ""zip.file(name, data, {binary: true})})promises.push(promise)})Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then(content => {FileSaver.saveAs(content, zipName || `文件.zip`)})})
}export default downloadFromAliOss

调用

downloadalioss(signedFileList, '附件.zip')
http://www.xdnf.cn/news/6705.html

相关文章:

  • 【Unity】用事件广播的方式实现游戏暂停,简单且实用!
  • 5月16日day27打卡
  • LED接口设计
  • R语言学习--Day03--数据清洗技巧
  • day32-多线程juc
  • QML元素 - OpacityMask
  • [BJDCTF2020]The mystery of ip
  • Python 在自动驾驶数据标签中的应用:如何让 AI 读懂道路?
  • 2025年山东省省赛数模竞赛C题完整论文+代码分享
  • 【动态导通电阻】GaN HEMT动态导通电阻的精确测量
  • 罗杰斯高频板技术解析:低损耗基材如何定义 5G 通信未来
  • tauri2项目使用tauri-plugin-updater配置更新程序流程
  • 如何阅读、学习 Tcc (Tiny C Compiler) 源代码?如何解析 Tcc 源代码?
  • VsCode和AI的前端使用体验:分别使用了Copilot、通义灵码、iflyCode和Trae
  • iOS音视频解封装分析
  • Spring Batch学习,和Spring Cloud Stream区别
  • MySQL面试知识点详解
  • 计算机图形学基础--Games101笔记(一)数学基础与光栅化
  • 生产级编排AI工作流套件:Flyte全面使用指南 — Core concepts Launch plans
  • 非受控组件在 React 中如何进行状态更新?
  • 好用的拓客APP有哪些?
  • C#学习第23天:面向对象设计模式
  • 基于WISE30sec制作中国1km分辨率土壤属性栅格数据(20种属性/0-200cm深度分层)
  • Flask框架搭建
  • 信号灯和旋钮在接地电阻柜内的作用主要包括以下几个方面
  • 吴恩达 Deep Learning(1-36)ppt逐行理解
  • React中使用openLayer画地图
  • 【大模型面试每日一题】Day 20:大模型出现“幻觉”(Hallucination)的可能原因有哪些?如何从数据或训练层面缓解?
  • 支持蓝牙5.0和2.4G私有协议芯片-PHY6222
  • ISBI 2012 EM 神经元结构分割数据集复现UNet