下载文件基本上有两种流行的方法。
1. Set window.location
Setting window.location
到下载网址将下载该文件。
window.location = '/path/to/download?arg=1';
略有不同的版本是打开一个包含下载路径的新选项卡
window.open('/path/to/download', '_self');
2.虚拟链接点击
使用 HTML5,您可以指定download
链接的属性。单击该链接(甚至以编程方式)将触发该 URL 的下载。这些链接甚至不需要成为 DOM 的一部分,您可以动态地创建它们。
var link = document.createElement('a');
link.href = '/path/to/download';
link.download = 'local_filename.csv';
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
link.dispatchEvent(e);
并非所有浏览器都支持此方法,因此即使您想使用此方法,也必须放弃对某些浏览器的支持或回退到第一种方法。
幸运的是,这个优秀的答案参考了一个很棒的小js
图书馆已经完成了这一切——http://pixelscommander.com/polygon/downloadjs/#.VrGw3vkrKHv
downloadFile('/path/to/download');
两步下载
您经常看到的另一个约定是两步下载,其中信息通过已知的 url 发送到服务器,服务器发回生成的可用于下载文件的 url 或 id。
如果您希望 url 可以共享,或者您必须将大量参数传递给下载生成器,或者只是想通过POST
要求。
$.ajax({
type: 'POST',
url: '/download/path/generator',
data: {'arg': 1, 'params': 'foo'},
success: function(data, textStatus, request) {
var download_id = data['id'];
// Could also use the link-click method.
window.location = '/path/to/download?id=' + download_id;
}
});