使用ajax请求下载文件

Question

我想点击按钮时发送"ajax下载请求",所以我试着这样做:

JavaScript的:

var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

的download.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");
?>

但是没有按预期工作,我该怎么办？先感谢您

Answer 1

2015年4月27日更新

下载属性是HTML5场景.它在Firefox和Chrome中得到支持,很快就会进入IE11.根据您的需要,您可以使用它而不是AJAX请求(或使用window.location),只要您要下载的文件与您的站点位于同一源.

你总是可以window.location通过使用一些JavaScript来测试是否download支持AJAX请求/ 回退,如果不支持,则将其切换为调用window.location.

原始答案

您不能让AJAX请求打开下载提示,因为您必须导航到该文件以提示下载.相反,您可以使用成功函数导航到download.php.这将打开下载提示,但不会更改当前页面.

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});

尽管这回答了这个问题,但最好只使用window.location并完全避免AJAX请求.

Answer 2

实际上你根本不需要ajax.如果您只是将"download.php"设置为按钮上的href,或者,如果它不是链接,则使用:

window.location = 'download.php';

浏览器应该识别二进制下载而不加载实际页面,而只是作为下载文件提供.

Answer 3

要使浏览器下载文件,您需要发出以下请求:

 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();
 }

Answer 4

跨浏览器解决方案,在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();

Answer 5

有可能的.您可以从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