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

 更新时间:2023年11月07日 08:52:19   作者:火星学姐  
在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

整理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标签的逻辑大同小异。

<el-button size="mini" @click="handleExport(item)">导出</el-button>
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>")
		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实现移动端判断上拉和下滑功能

    通过手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。接下来通过实例代码给大家介绍js移动端判断上拉和下滑功能,感兴趣的朋友一起看看吧
    2017-08-08
  • TypeScript中的类

    TypeScript中的类

    这篇文章主要介绍了TypeScript中的类,类这个概念基本是所有面向对象编程语言都具有一个概念,JavaScript中ES6 之前是没有类这个概念,下面文章围绕TypeScript类的相关资料展开内容,需要的朋友可以参考一下
    2021-12-12
  • JavaScript涉及二进制的转换方式

    JavaScript涉及二进制的转换方式

    这篇文章主要介绍了JavaScript涉及二进制的转换方式,具有很好的 参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • JavaScript实现的多种鼠标拖放效果

    JavaScript实现的多种鼠标拖放效果

    这篇文章主要介绍了JavaScript实现的多种鼠标拖放效果,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 解决layer弹出层中表单不起作用的问题

    解决layer弹出层中表单不起作用的问题

    今天小编就为大家分享一篇解决layer弹出层中表单不起作用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 关于获取DIV内部内容报错的原因分析及解决办法

    关于获取DIV内部内容报错的原因分析及解决办法

    这篇文章主要介绍了关于获取DIV内部内容报错的原因分析及解决办法的相关资料,需要的朋友可以参考下
    2016-01-01
  • 浅谈JS中this在各个场景下的指向

    浅谈JS中this在各个场景下的指向

    这篇文章主要介绍了浅谈JS中this在各个场景下的指向,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • JavaScript动态添加数据到表单并提交的几种方式

    JavaScript动态添加数据到表单并提交的几种方式

    这篇文章主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • js中arguments,caller,callee,apply的用法小结

    js中arguments,caller,callee,apply的用法小结

    本篇文章只要是对js中arguments,caller,callee,apply的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论