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

jQuery using AJAX to display PDF data obtained from a PHP file

我正在尝试使用 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);
}
?>

Does anyone know the right way of doing this?

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

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

    $data = array("success" => base64_encode($pdfData));
    
  • 当 AJAX 响应完成时,创建一个锚点 (link) 并使用 .click() to initiate the PDF download. I can't find any jQuery method window.location() on api.jquery.com... if you find it, let me know. Maybe you were thinking of updating the (read-only) property 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 along with some of the code from Alexandre's code in the answer below that.

  • 的改编代码

参见 this phpfiddle 中的演示。