通过js或query强制下载

IT技术 javascript jquery
2021-02-10 17:49:52

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

5个回答

随着 HTML5 的出现,您可以在锚标记中使用新的属性下载。

代码看起来像

<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

这确实是更先进的解决方案,但截至 2013 年 11 月,IE 或大多数移动设备不支持。(来源:caniuse.com/#feat=download
2021-03-16 17:49:52
值得注意的是,您可以为下载属性指定一个值,该值将成为下载的默认文件名。
2021-03-18 17:49:52
它不适用于 Opera 或 IE,但是我自己仍然喜欢这个解决方案。
2021-03-27 17:49:52
好吧,浏览器会阻止您在不同站点或不同端口下下载文件,因此功能非常有限....
2021-03-28 17:49:52
作为一项安全功能,当内容位于不同的主机名且来源受限于X-Frame-Options: SAMEORIGIN.
2021-04-07 17:49:52

动态创建链接并单击它的下载属性以强制下载为文件:

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

请注意,我什至没有将它添加到 DOM,所以它很快。

PSdownload属性不适用于 IE。但它只会在新标签中打开链接。 http://caniuse.com/#feat=download

什么浏览器?旧的默认android?我从来没有收到过关于这个不起作用的票,这个答案已经有好几年了。做一个测试,显示什么不起作用。
2021-03-21 17:49:52
而且 click() 也不适用于许多浏览器,或者仅适用于按钮:developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
2021-03-28 17:49:52
我无法使用 Edge 和 IE 进行测试,但最新版本的 Firefox 与 click() 不兼容,但仅适用于按钮。检查我之前设置的 MDN 链接,在底部,特别注意 Gecko,它在 safari 6 和 chrome 20 下是相同的(当然,旧浏览器)
2021-04-09 17:49:52

您不能从 JavaScript 强制这种行为,需要在服务器端设置 HTTP 标头:

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

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

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

(必须为 PDF 设置上述 HTTP 标头)


更新

在这个答案的时候,这是不可能的。现在是这样,向下滚动以查看其他答案

现在可以使用下载属性。
2021-03-14 17:49:52
不,标题或任何其他方法都不会强制下载。这个答案是不正确的。
2021-03-16 17:49:52
@mpen 是的,有一个答案是这样说的。在提问时,它不可用
2021-03-19 17:49:52
对。不是说你需要改变你的答案,但它出现在顶部并且被接受,所以我只是让人们知道他们懒得进一步滚动:-)
2021-03-22 17:49:52
@mpen 从 Chrome 65 开始,跨域 href 不再可能了。因此,如果您想<a href="https://i.imgur.com/IskAzqA.jpg" download>在 imgur.com 以外的域上创建,它将无法按预期工作。此处弃用和删除公告:developers.google.com/web/updates/2018/02/...
2021-04-07 17:49:52

不,这仅在 JQuery/JavaScript 中是不可能的。

您将需要一个服务器端脚本,该脚本会返回带有Content-Type(HTTP 标头)的文件,这将强制浏览器下载您请求的文件。的可能值Content-Typeapplication/force-download

但即使这样的标头也不会强制下载,这取决于用户如何在他的浏览器上本地设置可选。
2021-04-05 17:49:52

不,这是不可能的,感谢上帝,它不是。否则,当您在不知情的情况下访问网站时,我会让您想象一下,什么样的文件可以存储在您的计算机上。

正如@Paul D. White 在评论部分指出的那样,如果您想使用与其关联的默认程序内联(在浏览器内)打开文件,您可以让服务器发送 Content-Disposition HTTP 标头。例如:

Content-Disposition: inline; filename=foo.pdf
@user418232,恐怕这是不可能的。您不能使用 javascript 写入客户端计算机。
2021-03-20 17:49:52
目前我在页面上有一个按钮可以下载 pdf..... 它的作用是调用一个 ajax 函数,该函数使用后端 PHP 文件将 PDF 存储在磁盘上。然后我想简单地在 ajax 中强制下载该 PDF成功方法……
2021-03-24 17:49:52
正确:您只能在服务器端执行此操作,因为它是通过设置 HTTP 响应标头(特别是content-disposition: attachment)来完成的。一旦在客户端打开页面,根据定义,HTTP 响应已经被处理。
2021-03-27 17:49:52
提问者明确表示他想在对话框中使用它而不是打开一个新选项卡,所以这不是您要回复的内容吗?
2021-03-31 17:49:52
@gnur,正确。我将更新我的答案以包括@Paul D. White 优秀的提案。
2021-04-03 17:49:52