Web不用跳白页，直接在当前页面下载文件

关注我的公众号：【编程朝花夕拾】，可获取首发内容。

01 引言

在业务开发中，我们会经常遇到文件的上传下载，文件上传已经被玩烂了，各种插件和工具。但还是文件的下载总是被忽略，可能简单一行代码：

js 复制代码

window.open("/download");

这样的固然可以解决下载问题，但是会短暂的出现一个白页，体验感总是不好。功能实现了，我们也不会去多想，毕竟作为一个纯后端的开发，对于前端的细节也不讲究，以功能为准。

这两台天恰好做了一个上传、下载的功能：

开始做的时候，就按照最简单的方式（window.open("/file/downloadFile")）做了，但是当文件较大时，就会出现长时间的白页问题，体验感很差。如图：

恰好有时间，就想研究一下，怎么不跳转页面直接等待文件下载呢？

想到邮件中的附件下载，就是在当前页面下载的。就去看了看页面元素，发现直接使用了a标签实现的，于是就启动了自己的改造运动。

html 复制代码

<a href="/file/downloadFile">a标签下载</a>

看其他技术文章，需要a标签的download属性，download属性可以指定下载的文件名称。我这里没有指定。

但是，我们项目中用的按钮是button标签，无法直接使用a标签。

有这两种解决方案：

伪代码

js 复制代码

$("button").click(function() {
    // 触发a标签的点击事件
    $("a").click();
});

这里以创建临时标签为例：

js 复制代码

$("<a href='/file/downloadFile'></a>").click();

翻车了

然并卵，根本不生效。查了资料表示，浏览器为了防止自动下载，禁用了download，但是明明刚才可以用的。

修正

经过一些案例测试，发现Jquery无法触发a标签的点击事件。只能通过DOM节点触发。那就将Jquery转成DOM对象不就好了。

js 复制代码

$("<a href='/file/downloadFile'></a>")[0].click();

其实案例的下载就是发起一个请求，那么还可以通过什么方式发起类似href这样的请求呢。

我替大家试过了：img标签不行的，而form标签没有问题。

js 复制代码

let $form = $("<form action='/file/downloadFile'></form>");
$(document.body).append($form);
$form.submit();
$form.remove();

这里需要注意的是：form已经到加到body里面，否则就会出现下面的异常：

Form submission canceled because the form is not connected