react——利用jszip实现文件批量下载并打包成zip文件

本文章主要记录利用jszip实现文件批量下载图片，文档。mp3，视频（MP4)等文件，一般而言前端实现下载功能一般都是通过a链，这在下载单个文件的场景很实用，但如果是批量下载很多个文件，同样也可以用a链接实现但是当文件很多的时候浏览器下方会一下子弹出很多个单个文件，这个对于用户交互是不友好的，如下图所示（当然如果用户不吐槽，这种方式对于开发而言，是最简单快速的）:

总结批量下载的一般实现方案：

1.借助后端，让后端大佬接口直接返回一个已经打包好的zip静态资源链接，前端获取链接直接下载；

2.利用如下所说的a链接方式，遍历列表，然后a链接下载；

3.利用jszip把所有文件下载到一个zip文件下载下来；

由于后端大佬没时间，所以就尝试在前端打包，实现过程如下：

1.先引入相关的npm包

npm i --save axios jszip file-saver

2. 核心代码如下：

  // 请求文件资源const getFile = useCallback((url: string) => {return new Promise((resolve, reject) => {axios({method: 'get',url,responseType: 'blob',}).then((data) => {resolve(data.data);}).catch((error) => {reject(error.toString());});});}, []);// 批量下载const patchDownload = useCallback(async () => {const zip = new JSZip();const imgsss: JSZip | null = zip.folder('批量下载');const promises: Promise<T>[] = [];data.forEach((item) => {const promise = getFile(item.download_url).then((data: any) => {// 下载文件, 文件名必须带有文件类型后缀const file_name = `${item.name}.${item.file_format}`;// 逐个添加文件imgsss?.file(file_name, data, { binary: true }); });promises.push(promise);});Promise.all(promises).then(() => {zip.generateAsync({ type: 'blob' }).then((content) => {// 生成二进制流,利用file-saver保存文件FileSaver.saveAs(content, '批量下载.zip');}).catch(()=>{// 如果有资源文件下载失败，就直接用a链接下载dataSource.forEach((item) => {File.download({ url: item.download_url, fileName: item.name });});});});}, [data, getFile]);

react——利用jszip实现文件批量下载并打包成zip文件相关推荐

Java实现文件批量下载，打包成zip压缩包
最近在做一个管理系统的项目,需要实现一个功能,就是批量下载文件,并打包成zip压缩包. 前端通过POST请求传来要下载的文件列表,Java代码实现如下: import java.io.Bu ...
图片批量下载并打包成zip
需要引入两个js文件: <script src="__STATIC__/js/FileSaver.js"></script> <script src= ...
【java】文件批量下载并压缩为zip压缩包
[java] 文件批量下载并压缩为zip压缩包 java常用的压缩技术 java中常见实现压缩与解压业务场景代码实现注意点 java常用的压缩技术常见的压缩格式有很多种,例如:zip.rar. ...
java实现word下载及打包成zip下载(单个文件、多个文件)
最近,本人需求将实现word下载以及打包成zip进行下载(单个文件.多个文件)将最近自己学习到的知识点分享给大家 1.实现word模板(三个步骤,最终需要的是upload.ftl) 大家可以参考这篇文 ...
php将文件夹打包zip文件,php将文件夹打包成zip文件
php将文件夹打包成zip文件:function addFileToZip($path,$zip){ $handler=opendir($path); //打开当前文件夹由$path指定. while ...
php 文件夹打包_php将文件夹打包成zip文件
php将文件夹打包成zip文件:function addFileToZip($path,$zip){ $handler=opendir($path); //打开当前文件夹由$path指定. while ...
php 复制文件夹并压缩到最小_php将文件夹打包成zip文件
function addFileToZip($path,$zip){ $handler=opendir($path); //打开当前文件夹由$path指定. while(($filename=read ...
java 把文件打包成zip文件_java将文件或是文件夹打包压缩成zip格式
导读热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. import java.io.BufferedInputStream; impo ...
maven项目打包成zip文件
1.添加Maven插件 pom.xml <plugin><artifactId>maven-assembly-plugin&l ...

react——利用jszip实现文件批量下载并打包成zip文件

react——利用jszip实现文件批量下载并打包成zip文件相关推荐

最新文章

热门文章