处理文件下载从ajax张贴

创建一个表单，使用POST方法，提交表单-不需要iframe。当服务器页面响应请求时，为文件的mime类型写一个响应头，它将呈现一个下载对话框——我已经做过很多次了。

你想要内容类型的应用程序/下载-只要搜索如何为你使用的任何语言提供下载。

您使用的服务器端语言是什么?在我的应用程序中，我可以通过在PHP的响应中设置正确的标题轻松地从AJAX调用下载文件:

设置报头服务器端

header("HTTP/1.1 200 OK");
header("Pragma: public");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");


// The optional second 'replace' parameter indicates whether the header
// should replace a previous similar header, or add a second header of
// the same type. By default it will replace, but if you pass in FALSE
// as the second argument you can force multiple headers of the same type.
header("Cache-Control: private", false);


header("Content-type: " . $mimeType);


// $strFileName is, of course, the filename of the file being downloaded.
// This won't have to be the same name as the actual file.
header("Content-Disposition: attachment; filename=\"{$strFileName}\"");


header("Content-Transfer-Encoding: binary");
header("Content-Length: " . mb_strlen($strFile));


// $strFile is a binary representation of the file that is being downloaded.
echo $strFile;

这实际上会将浏览器“重定向”到这个下载页面，但正如@ahren已经在他的评论中说的，它不会导航离开当前页面。

这一切都是关于设置正确的头文件，所以我相信您会找到适合您所使用的服务器端语言(如果不是PHP的话)的解决方案。

处理响应客户端

{
status: 1, // ok
// unique one-time download token, not required of course
message: 'http://yourwebsite.com/getdownload/ska08912dsa'
}

在处理响应时，你在你的body中注入一个iframe，并将iframe的SRC设置为你刚刚接收到的URL，如下所示(使用jQuery来简化这个例子):

$("body").append("<iframe src='" + data.message +
"' style='display: none;' ></iframe>");

如果您如上所示设置了正确的标题，iframe将强制下载对话框，而不需要将浏览器从当前页面导航出去。

请注意

关于你的问题的额外补充;我认为使用AJAX技术请求东西时最好总是返回JSON。收到JSON响应后，就可以在客户端决定如何处理它。也许，例如，稍后您希望用户单击指向URL的下载链接，而不是强制直接下载，在您当前的设置中，您将不得不更新客户端和服务器端来实现这一点。

不要这么快就放弃，因为这可以(在现代浏览器中)使用FileAPI的部分:

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}


if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);


if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}


setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
}
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params, true));

或者如果使用jQuery.ajax:

$.ajax({
type: "POST",
url: url,
data: params,
xhrFields: {
responseType: 'blob' // to avoid binary data being mangled on charset conversion
},
success: function(blob, status, xhr) {
// check for a filename
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}


if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);


if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}


setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
}
});

我看到你已经找到了一个解决方案，但我只是想添加一些信息，这可能有助于有人试图实现与大POST请求相同的事情。

几周前我也遇到了同样的问题，确实不可能通过AJAX实现“干净”下载，Filament Group创建了一个jQuery插件，它的工作方式完全是你已经发现的，它被称为jQuery文件下载，然而这种技术有一个缺点。

如果您通过AJAX发送大请求(比如文件+1MB)，则会对响应性产生负面影响。在网速较慢的情况下，你将不得不等待很多直到请求发送，同时也等待文件下载。它不像一个即时的“点击”=>“弹出”=>“下载开始”。它更像是“点击”=>“等待数据发送”=>“等待响应”=>“下载开始”，这使得它看起来是文件大小的两倍，因为你必须等待请求通过AJAX发送，并将其作为可下载文件返回。

如果你使用的是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数据下载”线程，这并没有给我我正在寻找的答案，我希望这些信息能帮助人们实现这样的事情。

正如其他人所述，您可以通过POST请求创建并提交表单来下载。但是，您不必手动执行此操作。

jquery.redirect是一个非常简单的库。它提供了一个类似于标准jQuery.post方法的API:

$.redirect(url, [values, [method, [target]]])

我使用这个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实现了乔纳森修改答案的相同方法。

对于那些从Angular角度寻找解决方案的人来说，这对我来说很管用:

$http.post(
'url',
{},
{responseType: 'arraybuffer'}
).then(function (response) {
var headers = response.headers();
var blob = new Blob([response.data],{type:headers['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Filename";
link.click();
});

我想指出在接受的答案中使用这种技术时出现的一些困难，即使用表单post:

1. 你不能在请求上设置报头。如果您的身份验证模式涉及报头，即在授权报头中传递的Json-Web-Token，则必须找到其他方式来发送它，例如作为查询参数。

2. 您无法真正判断请求何时完成。好吧，你可以使用一个cookie来设置响应，如jquery。fileDownload，但它远非完美。它不能用于并发请求，如果没有响应，它就会中断。

3. 如果服务器响应错误，用户将被重定向到错误页面。

4. 您只能使用form所支持的内容类型。这意味着不能使用JSON。

我最终使用在S3上保存文件并发送预签名URL来获取文件的方法。

这是一个3年前的问题，但我今天遇到了同样的问题。我看了你编辑的解决方案，但我认为它可以牺牲性能，因为它必须做出双重请求。因此，如果有人需要另一个解决方案，不暗示调用服务两次，那么这是我做的方式:

<form id="export-csv-form" method="POST" action="/the/path/to/file">
<input type="hidden" name="anyValueToPassTheServer" value="">
</form>

此表单仅用于调用服务，避免使用window.location()。在此之后，您只需简单地使用jquery提交一个表单，以便调用服务并获取文件。这很简单，但是这样你就可以使用帖子进行下载。我现在，如果你调用的服务是得到，这可能会更容易，但这不是我的情况。

我也遇到过同样的问题，并成功地解决了它。我的用例是这样的。

"将JSON数据发送到服务器并接收一个excel文件。 该excel文件由服务器创建，并作为响应返回给客户机。将响应下载为浏览器中具有自定义名称的文件"

$("#my-button").on("click", function(){


// Data to post
data = {
ids: [1, 2, 3, 4, 5]
};


// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var a;
if (xhttp.readyState === 4 && xhttp.status === 200) {
// Trick for making downloadable link
a = document.createElement('a');
a.href = window.URL.createObjectURL(xhttp.response);
// Give filename you wish to download
a.download = "test-file.xls";
a.style.display = 'none';
document.body.appendChild(a);
a.click();
}
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

上面的代码片段只是执行以下操作

• 使用XMLHttpRequest将数组作为JSON发送到服务器。
• 在获取内容作为一个blob(二进制)后，我们正在创建一个可下载的URL，并将其附加到不可见的“a”链接，然后单击它。

这里我们需要小心地在服务器端设置一些东西。我在Python Django HttpResponse中设置了几个头。如果使用其他编程语言，则需要相应地设置它们。

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

由于我在这里下载xls(excel)，我将contentType调整为1以上。您需要根据您的文件类型设置它。您可以使用这种技术下载任何类型的文件。

参见:http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ 它将返回一个blob作为响应，然后可以将其放入filesaver

这是我如何得到这个工作 https://stackoverflow.com/a/27563953/2845977 < / p >

$.ajax({
url: '<URL_TO_FILE>',
success: function(data) {
var blob=new Blob([data]);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="<FILENAME_TO_SAVE_WITH_EXTENSION>";
link.click();
}
});

使用download.js更新了答案

$.ajax({
url: '<URL_TO_FILE>',
success: download.bind(true, "<FILENAME_TO_SAVE_WITH_EXTENSION>", "<FILE_MIME_TYPE>")
});

下面是我使用临时隐藏表单的解决方案。

//Create an hidden form
var form = $('<form>', {'method': 'POST', 'action': this.href}).hide();


//Add params
var params = { ...your params... };
$.each(params, function (k, v) {
form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v}));
});


//Make it part of the document and submit
$('body').append(form);
form.submit();


//Clean up
form.remove();

注意，我大量使用JQuery，但你可以用原生JS做同样的事情。

为了让乔纳森补偿 回答在Edge中工作，我做了以下更改:

var blob = typeof File === 'function'
? new File([this.response], filename, { type: type })
: new Blob([this.response], { type: type });

这个

var f = typeof File+"";
var blob = f === 'function' && Modernizr.fileapi
? new File([this.response], filename, { type: type })
: new Blob([this.response], { type: type });

我宁愿把这篇文章作为评论发表，但我在这方面没有足够的声誉

    String contentType = MediaType.APPLICATION_OCTET_STREAM_VALUE;
// Set headers
response.setHeader("content-disposition", "attachment; filename =" + fileName);
response.setContentType(contentType);
// Copy file to output stream
ServletOutputStream servletOutputStream = response.getOutputStream();
try (InputStream inputStream = new FileInputStream(file)) {
IOUtils.copy(inputStream, servletOutputStream);
} finally {
servletOutputStream.flush();
Utils.closeQuitely(servletOutputStream);
fileToDownload = null;
}

客户端实现(使用jquery):

$.ajax({
type: 'POST',
contentType: 'application/json',
url: <download file url>,
data: JSON.stringify(postObject),
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
},
success: function(message, textStatus, response) {
var header = response.getResponseHeader('Content-Disposition');
var fileName = header.split("=")[1];
var blob = new Blob([message]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
}
});

还有另一种解决方案下载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");


...

我希望这个解决方案对很多人都有用，就像对我一样。

如果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事件成功函数接收到的响应。

所以，这是关键:

  success: function (data, textStatus, xhr) {

这是我的代码:

var i = 0;
var max = 0;
function DownloadMultipleFiles() {
if ($(".dataTables_scrollBody>tr.selected").length > 0) {
var list = [];
showPreloader();
$(".dataTables_scrollBody>tr.selected").each(function (e) {
var element = $(this);
var orderid = element.data("orderid");
var iscustom = element.data("iscustom");
var orderlineid = element.data("orderlineid");
var folderPath = "";
var fileName = "";


list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName: fileName });
});
i = 0;
max = list.length;
DownloadFile(list);
}
}

然后调用:

function DownloadFile(list) {
$.ajax({
url: '@Url.Action("OpenFile","OrderLines")',
type: "post",
data: list[i],
xhrFields: {
responseType: 'blob'
},
beforeSend: function (xhr) {
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());


},
success: function (data, textStatus, xhr) {
// check for a filename
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
var a = document.createElement('a');
var url = window.URL.createObjectURL(data);
a.href = url;
a.download = filename;
document.body.append(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
else {
getErrorToastMessage("Production file for order line " + list[i].orderLineId + " does not exist");
}
i = i + 1;
if (i < max) {
DownloadFile(list);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {


},
complete: function () {
if(i===max)
hidePreloader();
}
});
}

c# MVC:

 [HttpPost]
[ValidateAntiForgeryToken]
public IActionResult OpenFile(OrderLineSimpleModel model)
{
byte[] file = null;


try
{
if (model != null)
{
//code for getting file from api - part is missing here as not important for this example
file = apiHandler.Get<byte[]>(downloadApiUrl, token);


var contentDispositionHeader = new System.Net.Mime.ContentDisposition
{
Inline = true,
FileName = fileName
};
//    Response.Headers.Add("Content-Disposition", contentDispositionHeader.ToString() + "; attachment");
Response.Headers.Add("Content-Type", "application/pdf");
Response.Headers.Add("Content-Disposition", "attachment; filename=" + fileName);
Response.Headers.Add("Content-Transfer-Encoding", "binary");
Response.Headers.Add("Content-Length", file.Length.ToString());


}
}
catch (Exception ex)
{
this.logger.LogError(ex, "Error getting pdf", null);
return Ok();
}


return File(file, System.Net.Mime.MediaTypeNames.Application.Pdf);
}

只要你返回响应200，成功的Ajax可以与它一起工作，你可以检查文件是否实际存在，在这种情况下，下面的行将是假的，你可以通知用户:

 if (disposition && disposition.indexOf('attachment') !== -1) {

对于那些寻找更现代的方法的人，你可以使用fetch API。下面的代码展示了如何下载电子表格文件。

fetch(url, {
body: JSON.stringify(data),
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
})
.then(response => response.blob())
.then(response => {
const blob = new Blob([response], {type: 'application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "file.xlsx";
document.body.appendChild(a);
a.click();
})

我相信这种方法比其他XMLHttpRequest解决方案更容易理解。此外，它具有与jQuery方法类似的语法，不需要添加任何额外的库。

当然，我建议检查一下你正在开发的浏览器，因为这种新方法在IE上行不通。您可以在以下[链接][1]上找到完整的浏览器兼容性列表。

重要的:在这个例子中，我发送一个JSON请求到一个服务器，监听给定的url。这个url必须设置，在我的例子中，我假设你知道这一部分。另外，考虑请求工作所需的头文件。由于我正在发送JSON，我必须添加Content-Type报头并将其设置为application/json; charset=utf-8，以便让服务器知道它将接收到的请求类型。

我需要一个类似的解决方案@alain-cruz的一个，但在nuxt/vue与多次下载。我知道浏览器阻止多个文件下载，我也有API返回一组csv格式的数据。我打算先使用JSZip，但我需要IE支持，所以这是我的解决方案。如果有人能帮助我改善这将是伟大的，但它为我工作到目前为止。

API返回:

data : {
body: {
fileOne: ""col1", "col2", "datarow1.1", "datarow1.2"...so on",
fileTwo: ""col1", "col2"..."
}
}

page.vue:

<template>
<b-link @click.prevent="handleFileExport">Export<b-link>
</template>


export default = {
data() {
return {
fileNames: ['fileOne', 'fileTwo'],
}
},
computed: {
...mapState({
fileOne: (state) => state.exportFile.fileOne,
fileTwo: (state) => state.exportFile.fileTwo,
}),
},
method: {
handleExport() {
//exportFileAction in store/exportFile needs to return promise
this.$store.dispatch('exportFile/exportFileAction', paramsToSend)
.then(async (response) => {
const downloadPrep = this.fileNames.map(async (fileName) => {
// using lodash to get computed data by the file name
const currentData = await _.get(this, `${fileName}`);
const currentFileName = fileName;
return { currentData, currentFileName };
});
const response = await Promise.all(downloadPrep);
return response;
})
.then(async (data) => {
data.forEach(({ currentData, currentFileName }) => {
this.forceFileDownload(currentData, currentFileName);
});
})
.catch(console.error);
},
forceFileDownload(data, fileName) {
const url = window.URL
.createObjectURL(new Blob([data], { type: 'text/csv;charset=utf-8;' }));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${fileName}.csv`);
document.body.appendChild(link);
link.click();
},
}

我使用Naren Yellavula的解决方案，并得到了它的工作与很少的改变脚本，使用jquery尝试其他几个解决方案后。但是，jquery将不能正确下载zip文件。下载后我无法解压缩文件。 在我的用例中，我必须上传一个压缩文件，该文件在Servlet中解压缩，在压缩文件下载到客户端之前，文件被处理并再次压缩。这是你在客户端需要做的

$('#fileUpBtn').click(function (e){
e.preventDefault();
var file = $('#fileUpload')[0].files[0];
var formdata = new FormData();
formdata.append('file', file);


// Use XMLHttpRequest instead of Jquery $ajax to download zip files
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4 && xhttp.status === 200) {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhttp.response);
a.download = "modified_" + file.name;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(a.href);
}
};
xhttp.open("POST", "<URL to Servlet>", true);
xhttp.responseType = 'blob';
xhttp.send(formdata);
});


<div class="form-group">
<label id="fileUpLabel" for="fileUpload"></label>
<input type="file" class="form-control" id="fileUpload" name="file" accept="" required/>
</div>
<button class="btn" type="submit" id="fileUpBtn"></button>