使用Javascript/jQuery下载文件

我有一个非常类似的要求，指定这里。

我需要让用户的浏览器在$('a#someID').click();时手动开始下载。

但我不能使用window.href方法，因为它会将当前页面内容替换为你要下载的文件。

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

Community
已编辑的问题 23日 五月 2017 в 12:26
编程
javascript jquery download
20日 九月 2010 в 6:58
19 种观点
解决办法

使用一个不可见的<iframe>。


<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

为了迫使浏览器下载一个它本来能够渲染的文件（如HTML或文本文件），你需要服务器将文件的MIME类型设置为一个无意义的值，如application/x-please-download-me，或者是application/octet-stream，用于任意二进制数据。

如果你只想在一个新的标签页中打开它，唯一的方法是让用户点击一个target'属性设置为_blank'的链接。

在jQuery中：

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

每当该链接被点击，它将在新的标签/窗口中下载文件。

Saran
编辑本段答案2日 十二月 2015 в 9:38
评论(21)

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文件下载插件（Demo）（GitHub），它也可以帮助解决你的情况。它的工作原理与iframe很相似，但有一些很酷的功能，我觉得很方便。

  • 非常容易设置，有漂亮的视觉效果（jQuery UI Dialog，但不是必须的），一切都经过测试。

  • 用户不会离开他们开始下载文件的同一页面。这个功能对现代网络应用来说是至关重要的

  • successCallback和failCallback函数允许你明确说明用户在任何情况下看到的东西。

  • 结合jQuery UI，开发人员可以很容易地显示一个模态，告诉用户正在进行文件下载，在下载开始后解散模态，甚至以友好的方式通知用户发生了一个错误。请看Demo中的一个例子。希望这能帮助到别人!

这里是一个使用插件source与承诺的简单用例演示。演示页包括许多其他的，'更好的用户体验'例子。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });
John Culviner
编辑本段答案30日 六月 2019 в 6:32
评论(10)

如果你已经在使用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');
corbacho
编辑本段答案14日 十月 2012 в 9:08
评论(7)