对我来说，这在chrome v72测试中工作正常

function down_file(url,name){
var a = $("<a>")
    .attr("href", url)
    .attr("download", name)
    .appendTo("body");
a[0].click();
a.remove();
}

down_file('https://www.useotools.com/uploads/nulogo[1].png','logo.png')

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

检查您的目标浏览器是否能够顺利运行上面的代码片段:http://caniuse.com/#feat=download

我最终使用了下面的代码片段，它可以在大多数浏览器中运行，但没有在IE中进行测试。

let data = JSON.stringify([{email: "test@domain.com", name: "test"}, {email: "anothertest@example.com", name: "anothertest"}]); let type = "application/json", name = "testfile.json"; downloader(data, type, name) function downloader(data, type, name) { let blob = new Blob([data], {type}); let url = window.URL.createObjectURL(blob); downloadURI(url, name); window.URL.revokeObjectURL(url); } function downloadURI(uri, name) { let link = document.createElement("a"); link.download = name; link.href = uri; link.click(); }

更新

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

function downloader(data, type, name) {
    let blob = new Blob([data], {type});
    let url = window.URL.createObjectURL(blob);
    downloadURI(url, name);
    window.URL.revokeObjectURL(url);
}

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的方法

我已经创建了jQuery文件下载插件(演示)(GitHub)，这也可以帮助您的情况。它的工作原理与iframe非常相似，但有一些很酷的功能，我发现相当方便:

Very easy to setup with nice visuals (jQuery UI Dialog, but not required), everything is tested too User never leaves the same page they initiated a file download from. This feature is becoming crucial for modern web applications successCallback and failCallback functions allow for you to be explicit about what the user sees in either situation In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring, disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred. See the Demo for an example of this.

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

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

我建议使用下载属性而不是jQuery:

<a href="your_link" download> file_name </a>

这将下载您的文件，而不需要打开它。

Firefox和Chrome测试:

var link = document.createElement('a');
link.download = 'fileName.ext'
link.href = 'http://down.serv/file.ext';

// Because firefox not executing the .click() well
// We need to create mouse event initialization.
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click", true, true);

link.dispatchEvent(clickEvent);

这实际上是firefox的“chrome”方式解决方案(我没有在其他浏览器上测试过，所以请留下关于可编译性的评论)