我在这里指定了一个非常类似的需求。

我需要有用户的浏览器手动启动下载时$('a#someID').click();

但是我不能用窗户。Href方法,因为它将当前页面内容替换为您试图下载的文件。

相反,我想在新窗口/标签中打开下载。这怎么可能呢?


当前回答

为了改进Imagine Breaker的答案,FF和IE支持:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

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

换句话说,只需使用dispatchEvent函数而不是click();

其他回答

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!'); });

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”方式解决方案(我没有在其他浏览器上测试过,所以请留下关于可编译性的评论)

我使用@ rakfaraway的解决方案而不使用JQuery(因为在这里不需要它)。谢谢你的建议!下面是一个香草ajs基于表单的解决方案:

const uri = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav'; let form = document.createElement("form"); 的形式。setAttribute(‘行动’,uri); document.body.appendChild(形式); form.submit (); document.body.removeChild (document.body.lastElementChild);

也许只是让你的javascript打开一个只下载文件的页面,比如当你把一个下载链接拖到一个新选项卡:

Window.open("https://www.MyServer.
Org/downloads/ardiuno/WgiWho=?:8080")

打开窗口,打开一个自动关闭的下载页面。

如果您已经在使用jQuery,可以利用它生成一个较小的代码片段 jQuery版本的Andrew的回答:

var $idown;  // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
  if ($idown) {
    $idown.attr('src',url);
  } else {
    $idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
  }
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');