vue 批量下载通用方法

自己做项目的时候遇到需要批量下载文件的需求，于是下意识就用了循环url地址数组创建a标签下载的方法，但浏览器有限制，超过10个文件将不能下载，最多下载10个。于是找遍网上文章，终于找到了适用的。在这记录一下，分享给需要的人

首先需要用到两个插件

file-saver 和 jszip

在需要批量下载功能的vue文件中引入

import { saveAs } from 'file-saver'
import JSZip from 'jszip'

我的项目的文件是存放在阿里云oss里所以我这边是直接就有url地址数据

先声明获取文件的函数

download(href) {return new Promise((resolve, reject) => {this.$axios({method:'get',url: href,responseType: 'arraybuffer'}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString())})})}

然后声明下载按钮所绑定的函数

downClick(){const zip = new JSZip()const cache = {}const promises = []//companyAttachmentsList是我自己的附件url地址数组 你可以改成你的数组companyAttachmentsList.forEach(item => {
//item.downloadLink.split('?')[0] 处理companyAttachmentsList里的url地址 去除？号和后面的字符串const promise = this.download(item.downloadLink.split('?')[0]).then(data => { // 下载文件, 并存成ArrayBuffer对象
//item.fileName companyAttachmentsList里的文件名zip.file(item.fileName, data, { binary: true }) // 逐个添加文件cache[item.fileName] = data //可要可不要 用来打印查检查添加了那些文件})promises.push(promise) //加到promises队列里})Promise.all(promises).then(() => { //异步队列全部完成时 执行下面代码zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流saveAs(content, "打包下载.zip") // 利用file-saver保存文件})})}

然后把downClick 绑定到按钮上点击就可以批量下载了

注意：打包好的zip文件中，会自动去重 zip.file()传入的文件名参数如果相同，不会重复添加。例如如果有10个文件，其中3个重名，那么zip文件里只有7个文件，不会重复打包如果想全部下载，建议文件名传入时加个index下标尾缀例：原文件名 + '_' + index

以上知识来源 Vue 中批量下载文件并打包的示例代码_vue.js_脚本之家 (jb51.net)

vue 批量下载通用方法相关推荐

百度智能云对象存储BOS批量下载文件方法
百度智能云对象存储BOS支持批量打包下载吗?目前对象存储BOS浏览器端不支持批量下载,可以使用对象存储BOS桌面或BOSCMD批量下载,也可以使用API/SDK调用接口循环下载.新手站长网来详细说下百 ...
python批量下载网页文件夹_Python抓取网页批量下载文件方法初探（正则表达式+BeautifulSoup） (转)...
最近两周都在学习Python抓取网页方法,任务是批量下载网站上的文件.对于一个刚刚入门python的人来说,在很多细节上都有需要注意的地方,以下就分享一下我在初学python过程中遇到的问题及解决方法 ...
搜狐视频批量下载的方法及步骤
怎么下载搜狐视频中的二次元视频?快来看小编的方法和步骤吧. 百度搜索视频下载高手下载打开单击短视频下载. 勾选自动粘贴网址. 浏览器搜索搜狐自媒体进入网站首页. 挑选需要或者喜欢的视频点击打开. 选 ...
搜狐视频美食烹饪的视频批量下载的方法及步骤
怎么下载搜狐视频中的二次元视频?快来看小编的方法和步骤吧. 百度搜索视频下载高手下载打开单击短视频下载. 勾选自动粘贴网址. 浏览器搜索搜狐自媒体视频进入首页拖动滚动条到下面"美食烹饪& ...
基于官方API实现ESA遥感数据批量下载的方法
一.确定Sentinel-2影像瓦片Tile分区号 Sentinel-2 A/B卫星的观测范围在56°S-84°N之间,影像数据采用UTM系统分区编码规则.其中,每个100km×100km的瓦片(Ti ...
淘宝批量下载图片方法
淘宝开店,任凭你消耗时间,付出加倍的努力,回报也还是极其微小的,难道这其中真的是哪里出错了?我们来淘宝是为了赚钱的,做生意就是为了利益,所以,在努力的同时,我们也要认清一些错误,多动动脑子.其宝贝的详 ...
阿里巴巴矢量图库批量下载的方法
fn+f12打开控制台输入图片上的代码可以看见图片全被选中滑动到购物车这里可以看见全被添加进了购物车下载所需要的格式就可以了~
用这个方法1分钟能批量下载上百张图片，亲测有效速度快
前段时间,因为工作的原因,需要下载很多图片.按照以往的习惯,想要把需要的图片素材下载保存到手机,通常的做法就是对着图片长按,然后保存图片.如果需要大量保存图片,这个方法就太慢太麻烦了.为了提高工作效率 ...
批量下载文件的设备和方法
申请日期:2014年11月20日申请人:北京安奇智联科技有限公司 [摘要] 本发明公开了一种驻留在移动终端中的批量下载文件的设备和方法.移动终端能够通过服务器与计算设备的浏览器相连.该批量下载文件的 ...
文件批量下载方法文件批量下载工具
软件版本:Internet Download Manager 在当今数字化时代,我们日常使用电脑进行各种工作和娱乐活动.有时候,我们需要从互联网上下载大量文件,例如电影.音乐.文档等.在这种情况下,手 ...

vue 批量下载通用方法

vue 批量下载通用方法相关推荐

最新文章

热门文章