前言
整理javascript下载文件五种方式,接收后台返回流下载或直接下载文件。欢迎补充~
业务场景
假设通过后端接口返回的流,需要前端点击【下载到本地】按钮下载文件。
一.window.location.href下载
最简单的方式:url即文件或接口地址,额外参数通过url后问号拼接参数,后端get请求方式接收。
缺陷:1.直接访问可能会覆盖当前页面地址,影响用户体验。
2.图片、pdf 等url资源会表现为预览而非下载。
二.window.open()下载
用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。url为后端提供的文件下载路径
缺陷:这个方法只能将指定路径的资源加载到浏览器里面,如果文件不能被浏览器浏览,那就会被浏览器下载到本地。反之,如果下载一个txt文本,用该方法会直接预览txt文件。
三.iframe 下载
和创建动态a标签的逻辑大同小异。
四.【动态a标签】结合【axios方法】的方式下载
-axios请求将后端给的文件流下载下来-若该接口有登录校验,将下载的文件流转换成blob数据,反之不需要这一步-通过window.URL.createObjectURL(blob)将blob转化成url-通过动态生成a标签,模拟点击下载事件-完成下载动作
1.若/getZipInfo接口没有登录校验,就不用下载文件流转成blob数据。
2.若/getZipInfo接口有登录校验,就需要把下载文件流转成blob数据再下载,res为文件流
五.form表单的形式下载【比较少用到,借鉴别人的方法】
注意: 若下载的文件包解压时需要密码的话,前后端生成的文件名必须一致才能解压,否则无法会导致解压失败。
总结
到此这篇关于javascript下载文件5种方式的文章就介绍到这了,更多相关js下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!