前端通过url链接下载文件

前端通过url链接下载文件

网上找到几个相关的方法,如下

// 方法一:
const form = document.createElement('form');
form.setAttribute('action', 'http://text.com/file.txt');
form.setAttribute('method', 'get');
form.setAttribute('target', '_blank');
form.setAttribute('style', 'display:none');
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

// 方法二: 
window.open('http://text.com/file.txt')

但是这两种方式都是新开一个标签页并显示出来，用户体验不是很好。
我们可以使用html中a标签的一种方法，如下：

// 方法三:
<a href="http://text.com/file.txt" download="fileName.txt">下载</a>

这是使用html5中加入a标签的新属性download,属性值为下载时保存的文件名。加上download属性后，点击a标签就不是跳转链接了，而是下载资源。

注意：以上方法只有在文件url链接的域名与当前域名相同时才适用