如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧以前很多后端的事也更多让前端来实现,我开始寻找一种无需服务器就可以强制下载的方法,经过一番努力,终于我找到了它。

欢迎大家来到IT世界,在知识的湖畔探索吧!

下载脚本长期以来一直是互联网可用性的重要组成部分。一般都是在服务端来实现的居多,随着技术的发展,前后端分离技术的兴起,以前很多后端的事也更多让前端来实现,我开始寻找一种无需服务器就可以强制下载的方法,经过一番努力,终于我找到了它,就在Firefox Devols Debugger中,有兴趣的朋友可以自己去试一下!

如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

后端的活我也能干了

废话不多说,直接上脚本。

1、javascript脚本

function downloadFile(data, fileName, type="text/plain") {
 // 创建不可见的元素
 const a = document.createElement("a");
 a.style.display = "none";
 document.body.appendChild(a);
 // 将href设置为要下载数据的blob表示形式
 a.href = window.URL.createObjectURL(
 new Blob([data], { type })
 );
 // 使用下载属性设置所需的文件名
 a.setAttribute("download", fileName);
 // 通过模拟点击触发下载
 a.click();
 // 清理
 window.URL.revokeObjectURL(a.href);
 document.body.removeChild(a);
}

欢迎大家来到IT世界,在知识的湖畔探索吧!

2、html元素

欢迎大家来到IT世界,在知识的湖畔探索吧!<form onsubmit="onFormSubmit(); return false;">
		<p>
			<label for="demo_filename">文件名称:</label><br>
			<input type="text" id="demo_filename">
		</p>
		<p>
			<label for="demo_content">内容:</label><br>
			<textarea id="demo_content"></textarea>
		</p>
		<button type="submit">下载</button>
	</form>
如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

3、运行效果

如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

是不是很简单,这样做的函数非常小,并且依赖于URL.createObjectUrl,函数注入<a>元素,将其设置为Blob值设置为目标文件的文本内容,并单击下载按钮以触发下载。元素在过程中保持隐藏状态,并在click()调用,一旦函数被调用,浏览器的下载提示就会显示出来,createObjectURL和Blob这两种技术才是真正的魔力!

如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

后端工程师表示可以早点下班了

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/35404.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信