function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

在Rails中，我是这样做的:

function download_file(file_id) {
  let url       = '/files/' + file_id + '/download_file';
    $.ajax({
    type: 'GET',
    url: url,
    processData: false,
    success: function (data) {
       window.location = url;
    },
    error: function (xhr) {
     console.log(' Error:  >>>> ' + JSON.stringify(xhr));
    }
   });
 }

诀窍在于窗户。位置的部分。控制器的方法如下所示:

# GET /files/{:id}/download_file/
def download_file
    send_file(@file.file,
          :disposition => 'attachment',
          :url_based_filename => false)
end

如果你想使用jQuery文件下载，请注意这一点。 您需要重新设置响应，否则将无法下载

    //The IE will only work if you reset response
    getServletResponse().reset();
    //The jquery.fileDownload needs a cookie be set
    getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
    //Do the reset of your action create InputStream and return

您的操作可以实现ServletResponseAware来访问getServletResponse()

使用窗口。打开https://developer.mozilla.org/en-US/docs/Web/API/Window/open

例如，你可以把这行代码放在点击处理程序中:

window.open('/file.txt', '_blank');

它将打开一个新选项卡(因为'_blank' window-name)，该选项卡将打开URL。

你的服务器端代码也应该是这样的:

res.set('Content-Disposition', 'attachment; filename=file.txt');

通过这种方式，浏览器应该提示用户将文件保存到磁盘，而不仅仅是向他们显示文件。它还会自动关闭刚刚打开的选项卡。

2019现代浏览器更新

这是我现在推荐的方法，但有几点注意事项:

需要一个相对现代的浏览器 如果文件非常大，您可能会采取与原始方法(iframe和cookie)类似的方法，因为以下一些操作可能会消耗至少与正在下载的文件相同大的系统内存和/或其他有趣的CPU副作用。

fetch('https://jsonplaceholder.typicode.com/todos/1') .then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; // the filename you want a.download = 'todo-1.json'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); alert('your file has downloaded!'); // or you know, something with better UX... }) .catch(() => alert('oh no!'));

2012年原创jQuery/iframe/Cookie的方法

Bluish在这一点上是完全正确的，你不能通过Ajax做到这一点，因为JavaScript不能直接将文件保存到用户的计算机(出于安全考虑)。不幸的是，将主窗口的URL指向您的文件下载意味着当文件下载发生时，您几乎无法控制用户体验。

我创建了jQuery文件下载，它允许“类似Ajax”的体验，文件下载完成OnSuccess和OnFailure回调，以提供更好的用户体验。看看我的博客文章，关于这个插件解决的常见问题和一些使用它的方法，还有一个jQuery文件下载的演示。这是来源

下面是一个简单的用例演示，使用带有承诺的插件源代码。演示页面还包括许多其他“更好的用户体验”示例。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

取决于你需要支持什么浏览器，你可以使用https://github.com/eligrey/FileSaver.js/，它允许比jQuery文件下载使用的IFRAME方法更明确的控制。

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}