jQuery 使用 AJAX 显示从 PHP 文件获取的 PDF 数据

Question

我正在尝试使用 AJAX 来查询 PHP 文件并向用户显示 PDF 文件。 PHP 文件的响应是存储在我的服务器上的 PDF 文件的原始数据。下面是我用来尝试完成此操作的代码，但它不起作用。我不断收到来自浏览器的错误请求错误。有谁知道这样做的正确方法？

我的最终目标是我不希望用户能够看到我存储 PDF 文件的服务器路径。我只希望使用 AJAX / PHP 脚本可以访问 PDF 文件。我知道这不是最安全的方法，但我只想让外行远离我的 PDF 文件。

jQuery:

$.ajax({
        type: "POST",
        url: 'process.php',
        data: {"name" : "value"},
        success: function (data) {
          var json = $.parseJSON(data);
          if(json.hasOwnProperty('success')){
            window.location(json.success);
            // json.success should contain the pdf binary data
            // i just cant figure out how display the pdf in the browser
          }
        }
}); 

PHP：

<?php   
$fileName = $_POST['name'];
if(isset($fileName)){
    $file = './path-to-forms/'.$fileName.'.pdf';
    $pdfData = file_get_contents($file);
    $data = array("success" => $pdfData, "name" => $fileName);
    echo json_encode($data);
}
?>

Answer 1

有人知道正确的做法吗？

一些更改应该可以正确下载文件：

• 更新 PHP 代码以使用 base-64 编码（即使用base64_encode()）发送文件内容：

  $data = array("success" => base64_encode($pdfData));
  

• 当 AJAX 响应完成时，创建一个锚点（链接）并使用 .click() 模拟单击​​它以启动 PDF 下载。我在api.jquery.com 上找不到任何jQuery 方法window.location()...如果你找到了，请告诉我。也许您正在考虑更新（只读）属性window.location？

  var json = $.parseJSON(data);
  if(json.hasOwnProperty('success')){
      var a = document.createElement("a");
      a.href = 'data:application/pdf;base64,'+json.success;
      a.download = "filePDF"; //update for filename
      document.body.appendChild(a);
      a.click();
      // remove `a` following `Save As` dialog, 
      // `window` regains `focus`
      window.onfocus = function () {                     
          document.body.removeChild(a)
      }
  } 
  

  感谢 guest271314 提供来自this answer 的改编代码以及来自 answer below that 中 Alexandre 代码的一些代码。

请参阅this phpfiddle 中的演示。