总会遇到许多下载数据或者文件的需求,总结下文件下载的几种方法吧。
1.利用<a>的download属性
<a>一般是用来处理页面跳转,路由跳转等情况,不过也可以实现下载这一功能。
HTML5中新添加了一个download属性,通过这个属性浏览器会生成下载窗口,可以在当前窗口下载文件,而不用打开新窗口,这样的处理是最能满足需求+用户体验的。
缺点:这样做的话href属性值需要被初始化,初始化的同时给a添加点击事件,会报错,下载不了文件并且点击事件也不会执行。
2.使用window.open实现下载
window.open(download_href, "_blank");
这种方式可以在当前窗口生成下载窗口,但是因为是在当前窗口打开新窗口,并且重定向到当前路径,因此会造成页面抖动(闪现)的现象,用户体验极其不好,虽然可以完成需求,但不建议使用。
出现该现象的原因可以了解下 浏览器的渲染原理 以及 window.open的一些相关。
3.表单提交的方式
在点击事件中添加如下代码:
var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action",download_href);
$eleForm.appendTo($('body'));
$eleForm.submit();
代码如上,HTML中则设置href属性为:"javascript:;",并且添加对应的点击事件即可。
使用“表单提交”的方式,一来可以在当前窗口生成下载窗口,自动保存所下载的文件;二来也不会造成页面抖动等不良用户体验。
具体使用还是看业务场景。