浏览器没有下载提示问题答案

【问题标题】：No Download Prompt Issue on Browser浏览器没有下载提示问题
【发布时间】：2017-07-06 00:59:12
【问题描述】：

我有一个简单的网页，我通过 html 按钮在 javascript 中触发 ajax 进行数据库查询，该 javascript 调用 php 脚本将查询放入数据库。然后，将查询返回的所有结果填充到 csv 文件中并下载。

问题是当我检查 wireshark 捕获时，我可以看到包含我在 HTTP 200 OK 数据包中需要的所有信息的数据包。但是，没有下载提示让我下载文件。

以下是数据包中的标头：

HTTP/1.1 200 OK
Date: Thu, 06 Jul 2017 00:52:35 GMT
Server: Apache/2.4.6 (Red Hat Enterprise Linux) PHP/5.4.16
X-Powered-By: PHP/5.4.16
Content-Description: File Transfer
Content-Disposition: attachment; filename=data.csv
Content-Length: 2968
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: application/csv; charset=utf-8

Media type: application/csv; charset=utf-8 (2968 bytes)

如果需要任何进一步的信息，请告诉我。

编辑 #1 - 添加 AJAX 代码：

        $.ajax({
            url:"export_csv.php", //the page containing php script
            data: { userID : "L2Export", 'avc' : avc, 'connType' : connType },
            type: "POST", //request type
            success:function(result){
                console.log("ajax success");
            }

编辑 #2 - 添加 PHP 代码：

$queryStatement = "SELECT * FROM ".$db_record." ".$where;
header("Content-Description: File Transfer");
header('Content-Type: application/csv; charset=utf-8'); 
header("Content-Disposition: attachment; filename=data.csv");
$output = fopen("php://output", "w");
fputcsv($output, array(<HEADERS ARE HERE>));  
$result = mysqli_query($conn, $queryStatement); 
//error_log("Here is the statement $queryStatement", 0);
while($row = mysqli_fetch_assoc($result))  {
    fputcsv($output, $row);
}
fclose($output);
mysqli_close($conn);

【问题讨论】：

HTML / JavaScript 使用...仅供参考，在几乎所有标准浏览器上都有一个叫做开发者工具的东西，wireshark 有点矫枉过正。
显示您的代码，http 标头的简单 sn-p 信息不足
后面的php脚本怎么触发？
仅供参考，执行 AJAX 请求不会触发下载。响应放置在发出请求的 XHR 实例的 XHR response、responseText 或 responseXML（如果适用）属性中。此外，由于您使用的是 jQuery，因此数据位于 success 回调的 result 参数中
我不知道我是否可以在开发人员工具中看到传入的数据包，谢谢。共享代码的ajax部分。那么，我是否应该尝试将结果放入 AJAX 中的文件并下载而不是在 php 中执行？对不起，我不是专家。另外，让我分享一下php sn-p。

标签： javascript php mysql ajax csv

【解决方案1】：

创建 AJAX 请求确实会从服务器获取资源，但该响应不会触发浏览器下载提示。要在 POST 请求上提示下载，您必须提交 <form> 并正确设置 Content-Disposition 标头（您在 PHP 中已正确完成）：

HTML：

<form method="POST" action="export_csv.php">
  <input type="hidden" name="userID" value="L2Export"/>
  <!-- other POST data... -->
  <button type="submit">Download CSV File</button>
</form>

如果需要，您甚至可以使用 JavaScript 在事件侦听器中动态添加其他隐藏的 <input> 字段：

JavaScript：

var form = document.querySelector('form[action="export_csv.php"]');

form.addEventListener('submit', function (event) {
  var avcEl = form.querySelector('[name="avc"]') || document.createElement('input');
  var connTypeEl = form.querySelector('[name="connType"]') || document.createElement('input');

  avcEl.type = 'hidden';
  avcEl.name = 'avc';
  avcEl.value = avc; // get this how you did for the $.ajax()

  connTypeEl.type = 'hidden';
  connTypeEl.name = 'connType';
  connTypeEl.value = connType; // get this how you did for the $.ajax()

  // don't worry, these won't error if they're already children of <form>
  form.appendChild(avcEl);
  form.appendChild(connTypeEl);
});

【讨论】：