通过 jQuery GET 强制“另存为”对话框

Posted

技术标签:

【中文标题】通过 jQuery GET 强制“另存为”对话框【英文标题】:Forcing "Save As" dialog via jQuery GET 【发布时间】:2011-07-14 20:22:28 【问题描述】:

我在下面的 test.php 文件代码中调用 jQuery“GET”。

我正在尝试让脚本在生成的 test.ini 文件上弹出“另存为”对话框,以允许将其保存在本地。但是,虽然我可以将结果回显到 jQuery 中,但我似乎无法弹出“另存为”对话框。

更新:感谢以下解决方案,我刚刚将 $.get 更改为 window.location.replace。

$('#test').click(
    function()
    
        //$.get('<?php echo get_bloginfo('template_directory') ?>/test.php');
        window.location.replace("<?php echo get_bloginfo('template_directory') ?>/test.php");

    
);

【问题讨论】:

我相信 AJAX 请求永远不会显示另存为对话框。为什么不直接导航到该页面而不是 AJAX 请求? 【参考方案1】:

您无法获得显示“另存为”对话框的 ajax 请求,但您可以在页面中插入隐藏的 iframe 元素,然后将该 iframe 的源设置为您希望用户访问的 url下载。瞧,这是你的另存为。

这是一个复制和粘贴示例:

$('a#linky').click(function()
  var iframe = document.createElement("iframe"); 
  iframe.src = 'http://example.com/branding.zip'; 
  iframe.style.display = "none"; 
  document.body.appendChild(iframe);
  return false;
);

【讨论】:

+1 用于复制/粘贴。我最终只是将我的 $.get 更改为 window.location.replace 但我可能会稍后再做。 不适合我,我的 pdf 在 iframe 上显示,但“另存为”对话框从未出现 :(.. 只是测试使用 google chrome... @nahum 提供的 PDF 是否带有 Content-Disposition: 附件标题?如果没有,Chrome 只会渲染它而不是下载文件。 对我来说更容易打开一个新的空白窗口并放置内容配置并解决我的问题... 我意识到这已经一岁了,但是当我在本地运行服务器时,我已经成功地使用了这个代码(在答案中),但是当我在远程机器上运行服务器时,iframe永远不会出现。事实上,什么都没有发生:服务器日志报告文件检索成功。但是没有出现另存为对话框。谁能提出为什么会发生这种情况?【参考方案2】:

您不需要 AJAX。只需导航到有问题的 php 并在该 php 中使用

header('Content-disposition: attachment;filename=whatever.dat');

这将弹出“另存为”对话框,您将保留在原始页面上。

【讨论】:

工作,除非有问题的 PHP 出错,在这种情况下,它将导航到新的 URL 并为用户打印错误。出于这个原因,我更喜欢使用新框架(或者,正如 Jimmy 建议的那样,iFrame。) 嗯,当然,如果您在系统中遇到错误,那么行为将与您预期的不同。如果您使用 Jimmy 建议的 iframe 方法并且您的 php 错误已解决,那么从用户的角度来看,什么都不会发生。也就是说,用户单击按钮/链接/等 - 没有任何反应 - 也不是最好的用户体验。 你不只是喜欢没有 cmets 的投票 - 答案五年后! 这是一个弥补它。恭喜您获得待定的 android 金质徽章。【参考方案3】:

AJAX 请求无法生成文件下载对话框。考虑改为在新窗口中打开您的下载目标。

【讨论】:

以上是关于通过 jQuery GET 强制“另存为”对话框的主要内容,如果未能解决你的问题,请参考以下文章

如何在不强制“另存为”对话框的情况下设置响应文件名

如何在不离开 php 页面的情况下强制保存另存为对话框?

html5 <a 下载> 强制“另存为”对话框

用“Content-Disposition:attachment;”强制弹出“另存为”对话框后,JS失效

如何通过强制另存为选项来保存网页的内容/文本

Chrome 扩展程序中未显示另存为对话框