我有一个javascript应用程序，发送ajax POST请求到某个URL。Response可以是JSON字符串，也可以是文件(作为附件)。我可以很容易地在ajax调用中检测到Content-Type和Content-Disposition，但是一旦我检测到响应包含一个文件，我如何让客户端下载它呢?我在这里读过一些类似的帖子，但没有一个能提供我想要的答案。
请，请，请不要发布建议我不应该使用ajax或我应该重定向浏览器的答案，因为这些都不是一个选项。使用普通的HTML表单也是不可行的。我所需要的是向客户端显示一个下载对话框。这能做到吗?如何做到?
当前回答
如果response是一个数组缓冲区，在Ajax的onsuccess事件下尝试这个:
if (event.data instanceof ArrayBuffer) {
var binary = '';
var bytes = new Uint8Array(event.data);
for (var i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i])
}
$("#some_id").append("<li><img src=\"data:image/png;base64," + window.btoa(binary) + "\"/></span></li>");
return;
}
事件的地方。数据是XHR事件成功函数接收到的响应。
其他回答
我想指出在接受的答案中使用这种技术时出现的一些困难，即使用表单post:
You can't set headers on the request. If your authentication schema involves headers, a Json-Web-Token passed in the Authorization header, you'll have to find other way to send it, for example as a query parameter. You can't really tell when the request has finished. Well, you can use a cookie that gets set on response, as done by jquery.fileDownload, but it's FAR from perfect. It won't work for concurrent requests and it will break if a response never arrives. If the server responds with a error, the user will be redirected to the error page. You can only use the content types supported by a form. Which means you can't use JSON.
我最终使用在S3上保存文件并发送预签名URL来获取文件的方法。
我看到你已经找到了一个解决方案，但我只是想添加一些信息，这可能有助于有人试图实现与大POST请求相同的事情。
几周前我也遇到了同样的问题，确实不可能通过AJAX实现“干净”的下载，Filament Group创建了一个jQuery插件，它的工作方式与您已经发现的完全相同，它被称为jQuery文件下载，但这种技术有一个缺点。
If you're sending big requests through AJAX (say files +1MB) it will negatively impact responsiveness. In slow Internet connections you'll have to wait a lot until the request is sent and also wait for the file to download. It isn't like an instant "click" => "popup" => "download start". It's more like "click" => "wait until data is sent" => "wait for response" => "download start" which makes it appear the file double its size because you'll have to wait for the request to be sent through AJAX and get it back as a downloadable file.
如果您使用的是小于1MB的小文件，则不会注意到这一点。但正如我在自己的应用程序中发现的那样，对于更大的文件大小来说，这几乎是无法忍受的。
我的应用程序允许用户导出动态生成的图像，这些图像通过POST请求以base64格式发送到服务器(这是唯一可能的方式)，然后处理并以.png， .jpg文件的形式发送回用户，图像的base64字符串+1MB是巨大的，这迫使用户等待超过必要的文件开始下载。在网速较慢的情况下，这真的很烦人。
我的解决方案是将文件临时写入服务器，一旦它准备好了，动态生成一个链接到文件的按钮形式，在“请等待…”和“下载”状态之间变化，同时，在预览弹出窗口中打印base64映像，以便用户可以“右键单击”并保存它。这使得所有的等待时间对用户来说更容易忍受，也加快了速度。
2014年9月30日更新:
自从我发布这篇文章以来，几个月过去了，最后我找到了一个更好的方法来加快使用大base64字符串的速度。我现在存储base64字符串到数据库(使用longtext或longblog字段)，然后我通过jQuery文件下载它的记录ID，最后在下载脚本文件上，我查询数据库使用这个ID拉base64字符串并通过下载函数传递它。
下载脚本示例:
<?php
// Record ID
$downloadID = (int)$_POST['id'];
// Query Data (this example uses CodeIgniter)
$data = $CI->MyQueries->GetDownload( $downloadID );
// base64 tags are replaced by [removed], so we strip them out
$base64 = base64_decode( preg_replace('#\[removed\]#', '', $data[0]->image) );
// This example is for base64 images
$imgsize = getimagesize( $base64 );
// Set content headers
header('Content-Disposition: attachment; filename="my-file.png"');
header('Content-type: '.$imgsize['mime']);
// Force download
echo $base64;
?>
我知道这远远超出了OP的要求，但是我觉得用我的发现更新我的答案会很好。当我在寻找我的问题的解决方案时，我读了很多“从AJAX POST数据下载”的帖子，这些帖子并没有给我我想要的答案，我希望这些信息能帮助那些想要实现这样的事情的人。
如果response是一个数组缓冲区，在Ajax的onsuccess事件下尝试这个:
if (event.data instanceof ArrayBuffer) {
var binary = '';
var bytes = new Uint8Array(event.data);
for (var i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i])
}
$("#some_id").append("<li><img src=\"data:image/png;base64," + window.btoa(binary) + "\"/></span></li>");
return;
}
事件的地方。数据是XHR事件成功函数接收到的响应。
我使用这个FileSaver.js。在我的情况下，与csv文件，我这样做(在coffescript):
$.ajax
url: "url-to-server"
data: "data-to-send"
success: (csvData)->
blob = new Blob([csvData], { type: 'text/csv' })
saveAs(blob, "filename.csv")
我认为对于大多数复杂的情况，必须对数据进行正确的处理。在底层，filesver .js实现了与Jonathan Amend的答案相同的方法。
还有另一种解决方案下载ajax网页。但我指的是必须首先处理然后下载的页面。
首先，您需要将页面处理与结果下载分离。
1) ajax调用中只进行页面计算。
$.post("CalculusPage.php", { calculusFunction: true, ID: 29, data1: "a", data2: "b" },
function(data, status)
{
if (status == "success")
{
/* 2) In the answer the page that uses the previous calculations is downloaded. For example, this can be a page that prints the results of a table calculated in the ajax call. */
window.location.href = DownloadPage.php+"?ID="+29;
}
}
);
// For example: in the CalculusPage.php
if ( !empty($_POST["calculusFunction"]) )
{
$ID = $_POST["ID"];
$query = "INSERT INTO ExamplePage (data1, data2) VALUES ('".$_POST["data1"]."', '".$_POST["data2"]."') WHERE id = ".$ID;
...
}
// For example: in the DownloadPage.php
$ID = $_GET["ID"];
$sede = "SELECT * FROM ExamplePage WHERE id = ".$ID;
...
$filename="Export_Data.xls";
header("Content-Type: application/vnd.ms-excel");
header("Content-Disposition: inline; filename=$filename");
...
我希望这个解决方案对很多人都有用，就像对我一样。
