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 中的演示。
我正在尝试使用 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 中的演示。