通过JavaScript或查询强制下载

Question

通过JavaScript或查询强制下载

javascriptjquery

29

是否可以通过JS或Javascript强制下载，即网页不应在浏览器中的新选项卡中打开文件，而应弹出窗口，让用户选择“另存为”或“打开”？

- Shaun

3

这个是重复问题吗？https://dev59.com/kHRB5IYBdhLWcg3wFz4g 使用JavaScript实现浏览器下载文件提示框。 - Marcus Frödin

这确实是一个有用的重复问题的好例子，因为虽然它谈论的是同一件事情，但问题标题的措辞却相当不同。 - Paul D. Waite

5个回答

31

动态创建带有下载属性的链接并通过点击来强制下载文件：

var anchor = document.createElement('a');
anchor.href = this.props.download_url;
anchor.target = '_blank';
anchor.download = this.props.file_name;
anchor.click();

注意，我甚至没有将它添加到DOM中，所以它很快。

附注：在IE中，download属性无法使用。但它只会在新标签页中打开链接。 http://caniuse.com/#feat=download

- Lukas Liesis

1

而且click()在许多浏览器中也无法正常工作，或者仅适用于按钮：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click - Bastien Robert

哪些浏览器？旧版默认的安卓浏览器吗？我从未收到过关于此无法工作的票据，而且这个答案已经几年了。做一个测试，展示一下哪里出了问题。 - Lukas Liesis

1

我无法在Edge和IE上进行测试，但最新版本的Firefox不支持a标签的click()方法，只支持按钮。请查看我刚刚提供的MDN链接，在底部有Gecko的特殊说明，而且在Safari 6和Chrome 20下也是一样的（当然，这些都是旧浏览器）。 - Bastien Robert

19

您无法通过JavaScript强制该行为，HTTP标头需要在服务器端设置：

Content-disposition=attachment; filename=some.file.name

您可以解决该问题的方法是让您的AJAX方法将用户重定向到PDF的URL：

location.replace('path/to.pdf');

（必须设置上述HTTP头信息才能生成PDF文档）

更新

在回答时，这是不可能的。现在可以了，向下滚动查看另一个说明的答案。

- Sean Patrick Floyd

3

现在可以通过"download"属性来实现。 - mpen

@mpen 是的，有一个回答也是这么说的。在提问时，它还没有可用。 - Sean Patrick Floyd

1

是的。我不是说你需要改变你的答案，但它出现在顶部并被接受了，所以我只是让那些懒得往下滚动的人知道 :-) - mpen

4

自 Chrome 65 版本开始，跨域 href 链接已不再可行。因此，如果您想在除 imgur.com 以外的域名上创建 <a href="https://i.imgur.com/IskAzqA.jpg" download>，可能会无法按预期工作。有关弃用和移除的公告请参见此处： https://developers.google.com/web/updates/2018/02/chrome-65-deprecations#block_cross-origin_wzxhzdk5a_download - Leeroy

不，无论是标题还是其他任何方法都不能强制下载。这个答案是错误的。 - user9315861

“download” 属性并不适用于所有媒体，特别是 jpg/png 文件。 - Sudhir Kaushik

3

不，这是不可能的，而且感谢上帝它不可能。否则，当您在不知情的情况下访问网站时，会存储什么样的文件，我将留给您的想象力。

正如@Paul D. White在评论中指出的那样，如果您想使用关联的默认程序内联打开文件（在浏览器中），则可以要求服务器发送Content-Disposition HTTP标头。例如：

Content-Disposition: inline; filename=foo.pdf

- Darin Dimitrov

正确的做法是只能在服务器端完成，因为它是通过设置HTTP响应头（具体来说是content-disposition: attachment）来完成的。一旦页面在客户端打开，HTTP响应就已经被处理了，这是定义好的。 - Paul D. Waite

提问者明确表示他想在对话框中使用它，而不是打开一个新标签页，所以这并不完全是你回复的内容？ - gnur

@gnur，正确。我会更新我的答案，包括@Paul D. White的优秀提议。 - Darin Dimitrov

这个答案并不完全正确。更重要的是，它没有回答问题。显然，OP并不是要直接访问文件系统，因为他/她特别提到了“另存为”对话框。 - Ian Ni-Lewis

否则，我让你想象一下在不知情的情况下访问网站时可能存储在计算机上的文件类型。HTML5（仅限Chrome / Safari / iOS）的超级强大功能：http://filldisk.com/ - i336_

显示剩余2条评论

3

很抱歉，使用JQuery/JavaScript无法实现此功能。

您需要使用服务器端脚本来返回带有Content-Type（HTTP头）的文件，以强制浏览器下载所请求的文件。 Content-Type 的一个可能值是application/force-download。

- Daniel Kutik

但是，即使有这样一个标题，也取决于用户在浏览器上如何设置可选项，仍然无法强制下载。 - user9315861

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gokul N K · Accepted Answer

使用HTML5后，您可以在锚标签中使用新属性“download”。代码看起来像这样：

<a download="name_of_downloaded_file" href="path/to/the/download/file"> Clicking on this link will force download the file</a>

它在最新版本的Firefox和Chrome上可以正常使用。我需要提到我没有在IE上检查过吗？:P

在sstur的评论后编辑了下载属性。

https://caniuse.com/#feat=download