跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

javascript下载文件5种方式实例详解

陆砚码
陆砚码
• 👁 0人浏览过

目录前言业务场景一.window.location.href下载二.window.open()下载三.iframe 下载四.【动态a标签】结合【axios方法】的方式下载1.若/getZipInfo接口没有登录校验，就不用下载文件流转成blob数据。

2.若/getZipInfo接口有登录校验，就需要把下载文件流转成blob数据再下载，res为文件流五.form表单的形式下载【比较少用到，借鉴别人的方法】总结前言整理javascript下载文件五种方式，接收后台返回流下载或直接下载文件。欢迎补充~业务场景假设通过后端接口返回的流，需要前端点击【下载到本地】按钮下载文件。

一.window.location.href下载最简单的方式：url即文件或接口地址，额外参数通过url后问号拼接参数，后端get请求方式接收。

let url='http://10.0.0.103:6767/file/downloadFile'window.location.href = url

缺陷：

1.直接访问可能会覆盖当前页面地址，影响用户体验。

2.图片、pdf 等url资源会表现为预览而非下载。

二.window.open()下载用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。

如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

url为后端提供的文件下载路径let url='http://10.0.0.103:6767/file/downloadFile'window.open(url);

缺陷：

这个方法只能将指定路径的资源加载到浏览器里面，如果文件不能被浏览器浏览，那就会被浏览器下载到本地。反之，如果下载一个txt文本，用该方法会直接预览txt文件。

三.iframe 下载和创建动态a标签的逻辑大同小异。

导出function handleExport(item) {try {let url='http://10.0.0.103:6767/file/downloadFile';let elementIftrame = document.createElement("iframe");elementIF.src = url;elementIF.style.display = "none";document.body.appendChild(elementIftrame);}catch(error) {console.log(error);}}四.【动态a标签】结合【axios方法】的方式下载-axios请求将后端给的文件流下载下来

-若该接口有登录校验，将下载的文件流转换成blob数据，反之不需要这一步

-通过window.URL.createObjectURL(blob)将blob转化成url

-通过动态生成a标签，模拟点击下载事件

-完成下载动作1.若/getZipInfo接口没有登录校验，就不用下载文件流转成blob数据。

let curHost=window.location.host let fileName=`module_20230920.zip`let url=`${curHost}/service/getZipInfo?fileName=${fileName}`// 创建下载按钮a标签进行自动点击下载，下载完后移除按钮a标签let downloadDom=document.createElement('a') downloadDom.href=url// downloadDom.download=fileName //--不是必须 若需要【前端重命名文件夹】的话这句代码就需要document.body.appendChild(downloadDom) downloadDom.click() document.body.removeChild(downloadDom)2.若/getZipInfo接口有登录校验，就需要把下载文件流转成blob数据再下载，res为文件流let fileName=`module_20230920.zip`let blob=new Blob([res],{type:'application/octet-stream'}) let href=window.URL.createObjectURL(blob)// 创建下载按钮a标签进行自动点击下载，下载完后移除按钮a标签let downloadDom=document.createElement('a') downloadDom.href=href downloadDom.download=fileName //--不是必须 若需要【前端重命名文件夹】的话这句代码就需要document.body.appendChild(downloadDom) downloadDom.click() document.body.removeChild(downloadDom) window.URL.revokeObjectURL(href)五.form表单的形式下载【比较少用到，借鉴别人的方法】function handleExport() {let url='http://10.0.0.103:6767/file/downloadFile'var form = $("

") form.attr("style", "display:none")/**target 属性规定一个名称或一个关键词，指示在何处打开 action URL，* 即在何处显示提交表单后接收到的响应。

**_blank 在新窗口/选项卡中打开。

*_self 在同一框架中打开。（默认）

*_parent 在父框架中打开。

*_top 在整个窗口中打开。

*framename 在指定的 iframe 中打开。

*/ form.attr("target", "_self");form.attr("method", "get");form.attr("action", url);$("body").append(form);// 提交form.submit();}

注意：

若下载的文件包解压时需要密码的话，前后端生成的文件名必须一致才能解压，否则无法会导致解压失败。

总结到此这篇关于javascript下载文件5种方式的文章就介绍到这了,更多相关js下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:js自动下载文件到本地的实现代码JS下载文件|无刷新下载文件示例代码JavaScript实现的浏览器下载文件的方法JavaScript实现文件下载的14种方法总结大全

相关文章