位置: IT常识 - 正文

详解JS实现单个或多个文件批量下载的方法(js编写一个标准的单例模式类)

编辑:rootadmin
详解JS实现单个或多个文件批量下载的方法

目录

0.JS简介

前言

单个文件Download

方案一:location.href or window.open

方案二:通过a标签的download属性

方案三:API请求

多个文件批量Download

方案一:按单个文件download方式,循环依次下载

方案二:前端打包成zip download

方案三:后端压缩成zip,然后以文件流url形式,前端调用download

总结


0.JS简介

推荐整理分享详解JS实现单个或多个文件批量下载的方法(js编写一个标准的单例模式类),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:详解js实现单个字符串,js实现dialog,js如何实现一个new,js实现dialog,js如何实现单例模式,详解js实现单个函数,详解js实现单个字符串,详解js实现单个函数,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript是一种基于原型的语言,它意味着它不使用类来定义对象,而是使用原型来定义对象和它们的属性和方法。这种原型继承模式是JavaScript的一个独特特征,使其与其他基于类的语言(如Java和C++)有所不同。

JavaScript在Web开发中扮演着非常重要的角色。在Web应用程序中,它可以用来验证表单、处理数据、响应用户交互等。JavaScript可以与HTML和CSS结合使用,创建交互式的、动态的Web页面。它可以与各种Web框架(如React、Angular和Vue.js)一起使用,以便更轻松地开发大规模的Web应用程序。

除了Web开发之外,JavaScript还可以用于服务器端开发。使用Node.js平台,JavaScript可以用于构建高度可伸缩的Web应用程序和API。Node.js是一个基于事件驱动、非阻塞I/O的平台,它使JavaScript可以在服务器端运行。Node.js包含了许多内置的模块,可以轻松地处理文件、网络、加密和HTTP请求等任务。

JavaScript还可以用于移动应用程序开发。与桌面应用程序不同,移动应用程序需要一种跨平台的语言来开发应用程序。JavaScript可以用于开发基于React Native的移动应用程序,这是一个用于构建原生移动应用程序的开源框架。使用React Native,开发人员可以使用JavaScript开发应用程序,并在iOS和Android上运行相同的代码。

JavaScript的语法相对简单,学习起来比较容易。它有许多内置函数和方法,可以用于处理字符串、数组、对象等常见的数据类型。JavaScript也支持闭包、高阶函数和函数式编程等概念,这些概念使代码更加灵活和可重用。

前言

在前端Web开发中,下载文件是一个很常见的需求,也有一些比较特殊的Case,比如下载文件请求是一个POST、url不是同源的、批量下载文件等。本文就介绍下几种download解决方案,以及特殊Case的最佳方案选择。

单个文件Download方案一:location.href or window.open<a href={url} target="_blank">download</a>window.location.href = url; // 当前tabwindow.open(url); // 新tab

缺点:

1.只支持get请求,不支持post请求。

2.浏览器会根据header的content-type来判断是下载文件还是预览文件。

比如 txt png 等格式文件,会在当前tab或新tab中预览,而不是下载下来。

3.由于只支持get,会有url参数过长问题。

4.不能加request header,无法做权限验证等逻辑。

5.不支持自定义file name。

方案二:通过a标签的download属性

通过HTML a标签的原生属性,使用浏览器下载。

详解JS实现单个或多个文件批量下载的方法(js编写一个标准的单例模式类)

<a> - HTML(超文本标记语言) | MDN

<a href={url} download={fileName}>download</a>function downloadFile(url, fileName) { const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a);}

优点:

都是走的浏览器下载文件逻辑,不会预览文件。当前tab打开方式下载。支持设置file name。

缺点:

只支持get请求,不支持post请求。不能加request header,无法做权限验证等逻辑。不支持跨域地址。方案三:API请求

API发送请求的方式,获取文件blog对象,然后通过URL.createObjectURL方法获取download url,然后用方案二的<a download />方式下载。

// 封装一个fetch download方法async function fetchDownload(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const fileName = getFileName(response); const blob = await response.blob(); const url = URL.createObjectURL(blob); return { blob, url, fileName }; // 返回blob、download url、fileName}// 根据response header获取文件名function getFileName(response) { const disposition = response.headers.get('Content-Disposition'); // 本例格式是:"attachment; filename="img.jpg"" let fileName = disposition.split('filename=')[1].replaceAll('"', ''); // 可以根据自己的格式来截取文件名 // 参考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition // let fileName = ''; // if (disposition && disposition.indexOf('attachment') !== -1) { // const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition); // fileName = matches?.[1]?.replace(/['"]/g, ''); // } fileName = decodeURIComponent(fileName); return fileName;}// 页面里调用// getfetchDownload('/api/get/file?name=img.jpg', 'GET').then(({ blob, url, fileName }) => { downloadFile(url, fileName); // 调用方案二的download方法});// postfetchDownload('/api/post/file', 'POST', { name: 'img.jpg' }).then(({ blob, url, fileName }) => { downloadFile(url, fileName);});

URL.createObjectURL 生成的url如果过多会有效率问题,可以在合适的时机(download后)释放掉。

if (window.URL) { window.URL.revokeObjectURL(url);} else { window.webkitURL.revokeObjectURL(url);}

优点:

因为最后用的是方案二,所以满足方案二的优点。支持post请求、支持跨域(fetch本身支持)。可以加request header。

缺点:

低版本浏览器不支持,可以通过'download' in document.createElement('a')判断是否支持。浏览器兼容可能有问题,比如Safari、IOS Safari。多个文件批量Download

有些需求是,点一个按钮需要把多个文件同时download下来,有以下几个方案可以实现。

方案一:按单个文件download方式,循环依次下载downloadFile("/files/file1.txt", "file1.txt");downloadFile("/files/word1.docx", "word1.docx");downloadFile("/files/img1.jpg", "img1.jpg");

利用上面的方案二的<a download />方式下载,会触发浏览器是Download multiple files提示,如果选了Allow则会正常下载。

尝试每个download之间加延迟,依然会弹提示。这个应该是浏览器机制问题了,没办法避免了。

方案二:前端打包成zip download

前端可以通过一个第三方库 jszip,可以把多个文件以blob、base64或纯文本等形式,按自定义的文件结构,压缩成一个zip文件,然后通过浏览器download下来。

// 先封装一个方法,请求返回文件blobasync function fetchBlob(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const blob = await response.blob(); return blob;}const zip = new JSZip();zip.file("Hello.txt", "Hello World\n"); // 支持纯文本等zip.file("img1.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // 支持Promise类型,需要返回数据类型是 String, Blob, ArrayBuffer, etczip.file("img2.jpg", fetchBlob('/api/post/file', 'POST', { name: 'img.jpg' })); // 同样支持post请求,只要返回类型正确就行const folder1 = zip.folder("folder01"); // 创建folderfolder1.file("img3.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // folder里创建文件zip.generateAsync({ type: "blob" }).then(blob => { const url = window.URL.createObjectURL(blob); downloadFile(url, "test.zip");});

jszip还支持一些别的类型文件压缩,比如纯文本、base64、binary等等,详见:

由于走的是纯前端压缩,所以会有延迟问题,走到最后download时才会调起浏览器下载,所以页面可能需要一个效果来更新压缩进度。zip.generateAsync方法就支持第二个参数,支持进度更新:

zip.generateAsync({ type: "blob" }, metadata => { const progress = metadata.percent.toFixed(2); // 保留2位小数 console.log(metadata.currentFile, "progress: " + progress + " %");}).then(blob => ... );方案三:后端压缩成zip,然后以文件流url形式,前端调用download

后台加个api,然后把需要download的文件在后台压缩成zip,然后把文件流输出出来。然后就和单个文件download一样了。

因为后台会先压缩,会有延迟才会把blob返回前台,而且需要传多个文件信息,一般是post请求,所以建议使用单个文件下载的方案三通过API请求实现,在请求前后加上提示语或loading效果。

总结

本文介绍了前端单个文件的下载方案,以及批量多个文件下载的解决方案。最后整理下方案建议:

单个文件下载:

如果url是同源的,并且是一个服务器上的静态文件路径、或者是一个get请求,推荐方案二即 <a download />方式下载。反之,方案三即API请求方式。

批量文件下载:

如果有zip压缩需求,选方案二或方案三;如果可以接受弹Download multiple files提示,用方案一;反之方案二或方案三;
本文链接地址:https://www.jiuchutong.com/zhishi/287945.html 转载请保留说明!

上一篇:日落时的多伦多天际线 (© diegograndi/Getty Images)(多伦多日照时间)

下一篇:解决 npm ERR! node-sass 和 gyp ERR! node-gyp 报错问题(解决的英文)

  • 优酷视频怎么下载到手机本地相册(优酷视频怎么下载到手机上)

    优酷视频怎么下载到手机本地相册(优酷视频怎么下载到手机上)

  • 完美解码有什么用(完美解码什么使用内置滤镜软件)

    完美解码有什么用(完美解码什么使用内置滤镜软件)

  • 淘宝首单红包用不了是(淘宝首单红包商品怎么找)

    淘宝首单红包用不了是(淘宝首单红包商品怎么找)

  • 钉钉横屏模式是什么(钉钉横屏模式是什么意思)

    钉钉横屏模式是什么(钉钉横屏模式是什么意思)

  • 红米k20pro指纹不灵敏(红米k20pro尊享版指纹解锁不灵敏)

    红米k20pro指纹不灵敏(红米k20pro尊享版指纹解锁不灵敏)

  • 微信怎么开通大额红包(微信怎么开通大额支付功能)

    微信怎么开通大额红包(微信怎么开通大额支付功能)

  • 麦克风阵列和麦克风区别(麦克风阵列和麦克风选哪个)

    麦克风阵列和麦克风区别(麦克风阵列和麦克风选哪个)

  • start windows normally是什么意思(start windows normally循环)

    start windows normally是什么意思(start windows normally循环)

  • ipad充电器可以充iphone11吗(ipad充电器可以充电脑吗)

    ipad充电器可以充iphone11吗(ipad充电器可以充电脑吗)

  • qq长时间不用会被注销吗(qq长时间不用会被别人用吗)

    qq长时间不用会被注销吗(qq长时间不用会被别人用吗)

  • 微信收款音箱s1和s2和s3区别(微信收款音箱s1怎么拆开)

    微信收款音箱s1和s2和s3区别(微信收款音箱s1怎么拆开)

  • 支付宝被永久限制收款(支付宝被永久限制了收款怎么解决)

    支付宝被永久限制收款(支付宝被永久限制了收款怎么解决)

  • 为什么金立手机开机要优化应用(为什么金立手机死机之后开不了机了)

    为什么金立手机开机要优化应用(为什么金立手机死机之后开不了机了)

  • 为什么抖音无缘无故的就封禁(为什么抖音无缘无故就关注一些人)

    为什么抖音无缘无故的就封禁(为什么抖音无缘无故就关注一些人)

  • 抖音红包提现不了怎么回事(抖音红包提现不出来)

    抖音红包提现不了怎么回事(抖音红包提现不出来)

  • x23和x23幻彩版手机壳通用吗(x23和x23幻彩版手机怎么区分)

    x23和x23幻彩版手机壳通用吗(x23和x23幻彩版手机怎么区分)

  • ipad air和mini区别(ipad mini和ipad air区别)

    ipad air和mini区别(ipad mini和ipad air区别)

  • ps怎么加口红(ps怎么口红换颜色)

    ps怎么加口红(ps怎么口红换颜色)

  • 乐视手机怎么解屏幕锁(乐视手机怎么解锁)

    乐视手机怎么解屏幕锁(乐视手机怎么解锁)

  • vue图片播放速度(vue怎么放慢视频速度)

    vue图片播放速度(vue怎么放慢视频速度)

  • 华为荣耀9x充电多长时间(华为荣耀9x充电器多少瓦)

    华为荣耀9x充电多长时间(华为荣耀9x充电器多少瓦)

  • 课堂派可以远程签到么(课堂派可以远程控制吗)

    课堂派可以远程签到么(课堂派可以远程控制吗)

  • 交管12123忘记密码手机号换了(交管12123忘记密码服务异常是怎么回事)

    交管12123忘记密码手机号换了(交管12123忘记密码服务异常是怎么回事)

  • access数据库可通过什么导入数据(access2007数据库怎么用)

    access数据库可通过什么导入数据(access2007数据库怎么用)

  • 键盘如何清理灰尘(清理键盘灰尘的小妙招)

    键盘如何清理灰尘(清理键盘灰尘的小妙招)

  • vivox27人脸解锁在哪设置(vivo手机人脸解锁)

    vivox27人脸解锁在哪设置(vivo手机人脸解锁)

  • 微信视频动态比例不对(微信动态视频比例怎么调整)

    微信视频动态比例不对(微信动态视频比例怎么调整)

  • win10中的通知栏怎样添加或删除图标通知(win10通知栏怎么设置)

    win10中的通知栏怎样添加或删除图标通知(win10通知栏怎么设置)

  • 建筑企业交税流程
  • 房地产印章图片
  • 应收账款平均余额包括应收票据吗
  • 行政事业单位购买固定资产的流程
  • 食品增值税发票需要交税吗
  • 收到返利款怎么做账
  • 未取得发票如何进应付暂估科目
  • 冲账其他应付款
  • 用现金购买的股票
  • 一年内到期的非流动负债包括哪些科目
  • 小规模纳税人季度销售额不超过30万免征
  • 不得抵扣的进项税额怎么处理
  • 价税合计啥意思
  • 公司购买理财产品的收益计入什么科目
  • 税控服务系统
  • 会计与税法折旧的关系
  • 创建上市公司
  • 试用期可以不交五险一金吗
  • 税前金额是不含税金额
  • 记账凭证需要哪些人员签章
  • 一般人企业所得税怎么算
  • 服务业的营业成本怎么算
  • 中国电信服务
  • 按揭购入固定资产怎么算
  • 海关增值税当月可以抵扣吗
  • 我想看一下这个月几日
  • 营改增后的增值税税率
  • 销售成本会计分录怎么做
  • wordpress文章缩略图
  • 冲减备用金该怎么做账
  • 那些收入不用缴税
  • 企业员工个人所得税申报流程
  • ssms注释
  • 约书亚树国家公园
  • 蒙塔巴诺督查
  • php调用url
  • javaweb重点知识总结
  • passwd -s命令
  • Yii2创建多界面主题(Theme)的方法
  • 新会计准则分录大全
  • mysql 内连接查询
  • PhoneGap was accuriqed by adobe
  • 生活服务业可以开具增值税专用发票
  • 期货风险准备金计提比例
  • 贸易公司开发票进项跟销项不符合怎么办?
  • 房地产公司收房款怎么分录
  • 凭证字号和凭证编号一样吗
  • 承包费会计处理
  • 企业跨年度的收入退回应该如何进行会计处理?
  • 买药费用应计入什么科目
  • 员工在异地缴纳社保,公司还能上吗
  • 汇算清缴主要检查什么
  • 上月留抵税怎么算应纳税额
  • 收到合同预付款在账上怎么记
  • 纳税人购进国内商品
  • 年底结账会计处理
  • 结账时应当结出每个账户的期末余额对吗
  • SqlServer 2000、2005分页存储过程整理第1/3页
  • sqlserver获取当前年
  • 微软windows8.1
  • windows集群运行
  • win2008下的HPC群集是什么有什么作用
  • linux操作系统安装方法有哪几种
  • win7系统如何调节电脑屏幕亮度
  • windows10如何取消密码开机
  • win10任务快速切换
  • opengl 旋转矩阵
  • mmap实现原理
  • javascript中数组
  • linux查找功能
  • 批处理 写入文件
  • jquerycdn
  • 基于javascript的毕业设计选题
  • jquery图片效果
  • [置顶] 快来貌相则不达很好skmzx5
  • 微信假消息
  • 国税总局201439号公告
  • 电子税务局税务数字证书登录
  • 核定征收的适用税率
  • 小规模纳税人企业所得税怎么征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设