PHP+MySQL网站数据库二进制PDF模态框显示空白问题排查

一、Base64编码与渲染格式校验 #

• 确认二进制数据未被转码污染：PHP从数据库取二进制字段时，直接读取原始值，不要做utf8_encode/utf8_decode这类字符串转码操作，避免二进制数据被修改。
• 严格遵循Data URI格式：模态框里的PDF容器（<embed>/<iframe>）的src必须是data:application/pdf;base64,{Base64字符串}，缺了application/pdf;base64,前缀会直接导致空白。
• 检查Base64字符串完整性：用console.log在JS里打印拿到的Base64内容，确保没有换行、空格或转义符（比如JSON返回时的\n），这些多余字符会破坏编码结构。

二、友好路由404问题修复 #

• 调整路由规则匹配PDF接口：
  • Apache环境（.htaccess）：添加明确的路由规则指向你的PDF控制器，比如：

    RewriteRule ^pdf/view/([0-9]+)$ pdf_view_controller.php?id=$1 [L]
    

  • Nginx环境：在配置中添加location规则转发请求：

    location /pdf/view/ {
        try_files $uri $uri/ /pdf_view_controller.php$is_args$args;
    }
    

• 直接测试控制器可用性：绕过路由访问控制器文件（比如http://你的域名/pdf_view_controller.php?id=1），如果能正常下载/显示PDF，说明路由规则是问题根源；如果还是不行，检查控制器是否正确输出Content-Type: application/pdf响应头，且没有输出任何多余内容（比如调试echo、空格）。

三、模态框渲染兼容性优化 #

• 用标准组件渲染PDF：优先使用<embed>标签或PDF.js库，避免自定义查看器的兼容问题：
  • <embed>示例写法：

    <embed type="application/pdf" src="data:application/pdf;base64,{{你的Base64数据}}" width="100%" height="600px">
    

  • PDF.js处理Base64示例：

    // 把Base64转成Uint8Array
    const rawData = atob(base64String);
    const pdfArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; i++) {
        pdfArray[i] = rawData.charCodeAt(i);
    }
    // 传入PDF.js加载
    pdfjsLib.getDocument({data: pdfArray}).promise.then(pdf => {
        // 渲染逻辑
    });
    

• 确保模态框完全加载后再渲染：如果用Bootstrap模态框，在shown.bs.modal事件触发后再设置PDF的src，避免DOM未就绪导致渲染失败。

四、后端输出细节检查 #

• 清理输出缓冲区：PHP控制器输出Base64或二进制内容前，用ob_clean()和flush()清空缓冲区，防止多余输出污染内容：

  ob_clean();
  flush();
  // 输出Base64或直接输出二进制
  echo base64_encode($pdf_binary_data);
  exit;
  

• 确认数据库字段类型：存储PDF的字段必须是LONGBLOB（支持最大4GB文件），BLOB仅支持64KB，若文件超过限制会导致数据截断（虽然你说改后缀能看，但仍需确认）。

内容的提问来源于stack exchange，提问作者Josue Velasquez