
本文旨在解决使用 fpdf 生成密码保护 pdf 文件时,通过 jquery ajax 调用后端导致文件无法下载,反而显示原始二进制数据的问题。文章将详细介绍如何利用 `xmlhttprequest` 的 `responsetype` 为 `blob` 来正确处理服务器返回的二进制数据,并在客户端触发文件下载,从而实现一个完整的、功能性的密码保护 pdf 下载方案。
FPDF 密码保护 PDF 的生成与下载机制
在使用 PHP 的 FPDF 库(特别是其扩展 FPDF_Protection)生成带有密码保护的 PDF 文件时,后端通常会通过设置 HTTP 响应头来指示浏览器下载文件。然而,当前端使用异步 Javascript 请求(如 jQuery AJAX)来触发这一过程时,常常会遇到文件无法下载,反而将 PDF 的原始二进制数据作为字符串显示在页面或控制台的问题。这主要是因为传统的 AJAX 请求默认将服务器响应视为文本或 JSON 数据,而非二进制文件流。
服务端 PHP 代码:生成密码保护 PDF
首先,我们来看服务器端如何使用 FPDF_Protection 生成一个密码保护的 PDF 文件。FPDF_Protection 扩展允许我们为 PDF 设置打开密码和权限密码。
<?php // 确保在输出任何内容之前启动输出缓冲 ob_start(); // 引入 FPDF_Protection 库 require('FPDF_protection.php'); if(isset($_POST["input"]) && $_POST["input"] == "generate_pdf"){ // 创建 FPDF_Protection 实例 $pdf = new FPDF_Protection(); // 设置 PDF 保护。array('print') 允许打印,$_POST["password"] 是打开密码。 // 更多权限可以参考 FPDF_Protection 文档。 $pdf->SetProtection(array('print'), $_POST["password"]); // 添加页面 $pdf->AddPage(); // 设置字体 $pdf->SetFont('Arial'); // 写入内容 $pdf->Write(10,"Hello, this is a password-protected PDF."); // 输出 PDF 到浏览器进行下载 // 'D' 参数表示“下载”,"Recovery_code.pdf" 是下载时的文件名 $pdf->Output('D',"Recovery_code.pdf"); // 刷新输出缓冲区,确保所有内容都被发送 ob_end_flush(); }?>登录后复制代码解析与注意事项:
ob_start() 和 ob_end_flush(): 这两个函数至关重要。ob_start() 启动输出缓冲,FPDF 在生成 PDF 时会直接向输出缓冲区写入数据和 HTTP 头。如果没有缓冲,任何意外的空白字符或错误信息都可能在 PDF 数据之前发送,导致 PDF 文件损坏或下载失败。ob_end_flush() 则确保缓冲区中的所有内容(包括 PDF 数据和下载头)都被发送到客户端。require('FPDF_protection.php'): 确保你已经正确引入了 FPDF_Protection 库文件。$pdf->SetProtection(array('print'), $_POST["password"]): 这是设置 PDF 保护的核心。第一个参数是一个数组,定义了允许的操作(如 'print', 'copy', 'modify' 等)。第二个参数是用户打开 PDF 时需要输入的密码。$pdf->Output('D', "Recovery_code.pdf"): Output() 方法的第一个参数 'D' 指示浏览器将文件作为附件下载。第二个参数是建议的文件名。前端 Javascript 代码:处理二进制下载
当服务器返回的是一个二进制文件流时,传统的 jQuery.ajax 方法的 success 回调会尝试将响应体解析为字符串,这正是导致乱码或原始二进制数据显示的原因。为了正确处理这种情况,我们需要使用 XMLHttpRequest 并指定 responseType 为 blob。
立即学习“前端免费学习笔记(深入)”;
Q.AI视频生成工具 支持一分钟生成专业级短视频,多种生成方式,AI视频脚本,在线云编辑,画面自由替换,热门配音媲美真人音色,更多强大功能尽在QAI
73 查看详情
<script>document.getElementById("downloadButton").addEventListener("click", function() { var req = new XMLHttpRequest(); var password = document.getElementById("password").value; var params = "input=generate_pdf&password=" + encodeURIComponent(password); // 对密码进行编码 req.open("POST", "backend.php", true); // 使用 POST 方法请求后端 req.responseType = "blob"; // 关键:指定响应类型为 blob,用于处理二进制数据 req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 设置请求头 req.onreadystatechange = function () { // 当请求状态为 DONE (4) 且 HTTP 状态码为 OK (200) 时 if (req.readyState === 4 && req.status === 200) { // 创建一个 Blob 对象,其中包含服务器返回的二进制数据 var blob = new Blob([req.response], { type: 'application/pdf' }); // 指定 MIME 类型 // 创建一个临时的 URL,指向这个 Blob 对象 var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); // 设置下载的文件名 link.download = "Recovery_code.pdf"; // 建议与后端 Output 方法中的文件名一致 // 模拟点击下载链接 document.body.appendChild(link); // 某些浏览器需要将链接添加到 DOM 才能点击 link.click(); // 释放 URL 对象,防止内存泄漏 window.URL.revokeObjectURL(link.href); document.body.removeChild(link); // 清理 DOM } else if (req.readyState === 4 && req.status !== 200) { // 处理错误情况,例如服务器返回非200状态码 console.error("PDF 下载失败,HTTP 状态码: " + req.status); alert("PDF 下载失败,请稍后再试。"); } }; req.send(params); // 发送请求});</script><!-- HTML 示例,用于触发下载 --><div> <label for="password">PDF 密码:</label> <input type="password" id="password" value="mysecretpassword"> <button id="downloadButton">下载密码保护 PDF</button></div>登录后复制代码解析与注意事项:
req.responseType = "blob": 这是解决问题的核心。它告诉 XMLHttpRequest 将服务器响应作为 Blob 对象处理,而不是尝试解析为文本。var params = "input=generate_pdf&password=" + encodeURIComponent(password);: 构建 POST 请求体参数。encodeURIComponent 用于对密码等特殊字符进行编码,确保数据传输的正确性。req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');: 对于 POST 请求,设置正确的 Content-type 头是必要的,以便服务器正确解析请求体。var blob = new Blob([req.response], { type: 'application/pdf' });: 当请求成功时,req.response 将是一个 Blob 对象。我们将其封装在一个新的 Blob 中,并明确指定其 MIME 类型为 'application/pdf',这有助于浏览器正确识别文件类型。window.URL.createObjectURL(blob): 这是一个非常方便的 API,它会为 Blob 对象创建一个临时的 URL。这个 URL 可以像普通的文件 URL 一样被浏览器处理。link.download = "Recovery_code.pdf": 设置 <a> 标签的 download 属性,可以强制浏览器下载文件,并指定下载时的文件名。link.click(): 通过 Javascript 模拟点击这个隐藏的下载链接,从而触发文件下载。window.URL.revokeObjectURL(link.href): 在文件下载触发后,应该及时释放由 createObjectURL 创建的临时 URL,以避免内存泄漏。错误处理: 增加了 else if (req.readyState === 4 && req.status !== 200) 分支,用于处理服务器返回非 200 状态码时的错误情况,提升用户体验。总结
通过结合 PHP 后端的 FPDF_Protection 库和前端 XMLHttpRequest 的 responseType = "blob" 特性,我们可以优雅地实现密码保护 PDF 文件的生成与下载功能。关键在于理解二进制数据在 HTTP 请求和响应中的处理方式,并选择正确的客户端 API 来处理文件流。这种方法不仅适用于 PDF 文件,也适用于任何需要从服务器下载二进制文件的场景。
以上就是FPDF 生成密码保护 PDF:前端下载解决方案的详细内容,更多请关注php中文网其它相关文章!



