当我点击按钮时，我想发送一个 "ajax下载请求"，因此我尝试了以下方法：
javascript：
var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();
下载.php：
<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");
readfile("file.txt");
?>
但是它没有像预期的那样工作，我该怎么办？提前谢谢。
2015年4月27日更新
在HTML5领域中正在崭露头角的是下载属性(download attribute)。它已经在Firefox和Chrome中得到了支持，并且很快将会出现在IE11中。根据您的需要，只要所需下载的文件与您的站点具有相同的来源，您可以使用它来代替AJAX请求（或使用window.location）。
您始终可以通过使用一些JavaScript来测试是否支持download属性，如果不支持，则切换到调用window.location作为备选方案。
原始回答
您无法通过AJAX请求打开下载提示框，因为您必须实际导航到文件才能提示下载。相反，您可以使用成功函数导航到download.php。这将打开下载提示框，但不会更改当前页面。
$.ajax({
url: 'download.php',
type: 'POST',
success: function() {
window.location = 'download.php';
}
});
window.location ，避免整个 AJAX 请求。要让浏览器下载文件，您需要按照以下方式进行请求：
function downloadFile(urlToSend) {
var req = new XMLHttpRequest();
req.open("GET", urlToSend, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;
var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download=fileName;
link.click();
};
req.send();
}
<a>标签，但必须将其附加到document.body上。同时，您肯定希望隐藏它。 - Márton Tamáslink.click() 后添加 link.remove()。 - Alberto Manuelvar blob = new Blob([req.responseText], { type: 'text/csv', }) - Alberto Manuelwindow.location = 'download.php';
window.location 的是 JavaScript。 - mikemaccana跨浏览器解决方案，已在Chrome、Firefox、Edge和IE11上进行测试。
在DOM中添加一个隐藏的链接标签：
<a id="target" style="display: none"></a>
那么：
var req = new XMLHttpRequest();
req.open("GET", downloadUrl, true);
req.responseType = "blob";
req.setRequestHeader('my-custom-header', 'custom-value'); // adding some headers (if needed)
req.onload = function (event) {
var blob = req.response;
var fileName = null;
var contentType = req.getResponseHeader("content-type");
// IE/EDGE seems not returning some response header
if (req.getResponseHeader("content-disposition")) {
var contentDisposition = req.getResponseHeader("content-disposition");
fileName = contentDisposition.substring(contentDisposition.indexOf("=")+1);
} else {
fileName = "unnamed." + contentType.substring(contentType.indexOf("/")+1);
}
if (window.navigator.msSaveOrOpenBlob) {
// Internet Explorer
window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
} else {
var el = document.getElementById("target");
el.href = window.URL.createObjectURL(blob);
el.download = fileName;
el.click();
}
};
req.send();
el.click()之后添加window.URL.revokeObjectURL(el.href);吗？ - vibs2006这是可能的。例如，在ajax函数内部创建 .csv 文件后，您可以启动下载。
我有一个 ajax 函数，用于将联系人数据库导出为 .csv 文件，并在完成后自动启动 .csv 文件下载。因此，在获取 responseText 并一切顺利后，我会像这样重定向浏览器：
window.location="download.php?filename=export.csv";
我的 download.php 文件看起来是这样的：
<?php
$file = $_GET['filename'];
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=".$file."");
header("Content-Transfer-Encoding: binary");
header("Content-Type: binary/octet-stream");
readfile($file);
?>
没有任何页面刷新，文件会自动开始下载。
注意 - 在以下浏览器中测试通过：
Chrome v37.0.2062.120
Firefox v32.0.1
Opera v12.17
Internet Explorer v11
我更喜欢使用 location.assign(url);
完整语法示例：
document.location.assign('https://www.urltodocument.com/document.pdf');
对于那些寻求更现代方法的人，可以使用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上无法工作。您可以在以下链接中找到完整的浏览器兼容性列表。
重要提示: 在本例中，我向一个监听给定url的服务器发送JSON请求。这个url必须设置好，在我的例子中，我假设您知道这部分内容。此外，请考虑所需的头文件，以使您的请求正常工作。由于我发送的是JSON，所以必须添加Content-Type头并将其设置为application/json; charset=utf-8，以让服务器知道它将接收到的请求类型。
@Joao Marcos的解决方案对我有效，但我不得不修改代码才能在IE上运行，下面是代码的样子
downloadFile(url,filename) {
var that = this;
const extension = url.split('/').pop().split('?')[0].split('.').pop();
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "blob";
req.onload = function (event) {
const fileName = `${filename}.${extension}`;
const blob = req.response;
if (window.navigator.msSaveBlob) { // IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
};
req.send();
},
您的需求可以通过以下代码实现：window.location('download.php');
但我认为您需要传递要下载的文件，而不是总是下载相同的文件，这就是为什么您正在使用请求的原因之一。一个选项是创建一个简单的php文件，例如showfile.php，并进行如下请求：
var myfile = filetodownload.txt
var url = "shofile.php?file=" + myfile ;
ajaxRequest.open("GET", url, true);
showfile.php
<?php
$file = $_GET["file"]
echo $file;
其中 file 是通过请求的 Get 或 Post 传递的文件名，然后在一个函数中捕获响应即可。
if(ajaxRequest.readyState == 4){
var file = ajaxRequest.responseText;
window.location = 'downfile.php?file=' + file;
}
}
在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;
}
}
);
// 例如：在 CalculusPage.php 中
if ( !empty($_POST["calculusFunction"]) )
{
$ID = $_POST["ID"];
$query = "INSERT INTO ExamplePage (data1, data2) VALUES ('".$_POST["data1"]."', '".$_POST["data2"]."') WHERE id = ".$ID;
...
}
// 例如：在 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");
...
我希望这个解决方案对许多人都有用，就像对我一样。
location.href='download.php';- Musa