如何获取浏览器提示用户保存由服务器动态生成的文件？ [英] How do I get browser to prompt user to save a file dynamically generated by server?

问题描述

客户端使用jQuery的ajax提交申请后，如下图所示：

Clients submit post requests using jquery ajax as illustrated below:

$.ajax({
    url: "/xxx?request1", 
    data: theParams,
    type: 'post',
    error: function(XMLHttpRequest, textStatus, errorThrown){
        // error handling
    },
    success: function(data){
    var theResult = JSON.parse(data);
        // success handling
    }
});

Apache的配置为使用 / XXX？请求传递到自定义应用程序。该应用程序处理请求并返回信息。通常情况下，这些信息返回JSON，并显示成功处理一节中，使用jQuery / JavaScript的。该应用程序写入下列头（其中，然后通过Apache返回）写的JSON之前：

Apache is configured to pass requests with /xxx? to a custom app. The app processes the request and returns information. Usually, this information returned as JSoN and is displayed in the "success handling" section, using jquery/javascript. The app writes the following headers (which are then returned via apache) prior to writing the JSON:

HTTP/1.0 200 OK
Connection: close
Server: MyServer v. 0.826
Content-Type: text/html

我也有工作的Cookie通过将以下权200 OK行之后：

I also have cookies working by placing the following right after the 200 OK line:

Set-Cookie: cookie_name=value; Domain=example.com; Path=/; Expires=Fri, 21-Mar-2014 01:40:22 GMT; HttpOnly

在一种情况下，我希望用户能够保存返回的数据（如纯文本文件）。但这里是我遇到的问题。

In one scenario, I'd like the user to be able to save the returned data (as a plain text file). But here is where I run into problems.

如果我使用JavaScript来打开一个窗口，并将数据写入到新窗口，我发现，Safari和Chrome都禁止了另存为...菜单选项（在Mac上）。

If I use JavaScript to open a window and write the data to the new window, I've found that Safari and Chrome both disable the "Save as..." menu option (on Macs).

（我有一个版本使用Base64 URI的工作，但是这看起来糙米相对于其他网站。）

(I have got a version working by using base64 URI, but that looks unpolished relative to the rest of the site.)

然后，我开始尝试包括内容处置：附件;文件名= file.txt的 头，但我永远不会让浏览器产生一个提示。我试图把这个标题中的200 OK行之后，以及更高版本：

I then began trying to include a Content-Disposition: attachment; filename=file.txt header but I could never get the browser to produce a prompt. I tried placing this header right after the 200 OK line, as well as later:

Content-Type: text/plain
Content-Disposition: attachment; filename=file.txt

除了是不知道的内容处置头的精确格式的，我也不知道我有内容型正确的，或者有什么东西在AJAX的处理程序code是preventing保存。

In addition to being not sure of the exact format of the Content-Disposition header, I'm also not sure if I have the Content-Type correct or if there's something in the ajax handler code that is preventing the save.

我试图找到这里的一切是放在一起的例子，但只能找到部分，并明确我不能把它放在一起正常。有什么建议？

I've tried to find examples where everything is put together, but can only find parts and clearly I can't get it put together correctly. Any suggestions?

我只针对现代浏览器三大平台（苹果/的Windows / Linux），只有HTML5 / JavaScript的客户端上。

I'm targeting only modern browsers, three major platforms (Mac/Windows/Linux), and only HTML5/JavaScript on the client side.

推荐答案

内容处置：附件是正确的标题，但浏览器只加载文件时遵循它直。 （即使是通过jQuery的）使用AJAX将无法正常工作。

Content-Disposition: attachment is the right header, but the browser only obeys it when loading the file directly. Using AJAX (even through jQuery) will not work.

有一种方法可以做到这一点。 阅读这个答案的完整的解释，但基本上你只要写在你的成功功能：

There is a way to do this. Read the full explanation in this answer, but basically you just have to write that in your success function:

window.location = "data:application/octet-stream," + encodeURIComponent(theResult);

编辑：的 FileSaver.js 提供一个包装的提高浏览器的兼容性并加入支持的文件名兼容的浏览器：

FileSaver.js provides a wrapper improving browser compatibility and adding support for filenames for compatible browsers:

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

这篇关于如何获取浏览器提示用户保存由服务器动态生成的文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！