Framework7请求接口返回文件下载后生成Blob PDF空白问题求解

PDF空白的核心原因是前端默认将二进制PDF内容作为文本编码解析，导致原始二进制数据被破坏，同时服务端缺少必要的响应头配置，两个环节调整即可解决：

1. 前端代码调整 #

Framework7的$f7.request默认响应类型为文本，会将二进制PDF内容按UTF-8编码转码，直接生成Blob会丢失原始二进制信息。需要显式指定响应类型为blob，不需要手动二次构造Blob。

$f7.request({
  method: 'POST',
  url: urlofwebsite + 'api/getFile.php',
  crossDomain: true,
  // 新增：指定响应类型为blob，直接获取二进制对象
  responseType: 'blob',
  data: {
    fakeid: idoffile,
    iduser: iduser, // 出于安全校验用途
    time: timeoflogin // 出于安全校验用途
  },
  success: function(data, status, xhr) {
    // 这里返回的data已经是合法的Blob对象，不需要重新构造
    var url = window.URL.createObjectURL(data);
    var fileName = 'test.pdf';
    var link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
    // 可选：释放blob占用的内存
    window.URL.revokeObjectURL(url);
  }
});

2. 服务端PHP代码调整 #

需要添加正确的响应头，确保输出内容被识别为PDF，同时避免多余输出污染文件内容。

// 添加必要的响应头
header('Content-Type: application/pdf');
// 可选：如果需要服务端指定下载文件名可以加下面这句
// header('Content-Disposition: attachment;filename="test.pdf"');
// 禁止缓存，避免旧文件干扰
header('Cache-Control: no-cache, no-store, must-revalidate');
$file = $_SERVER['DOCUMENT_ROOT'].$res['url'];
// 先判断文件存在且可读，避免输出错误内容
if (is_file($file) && is_readable($file)) {
    readfile($file);
}
// 终止后续输出，避免多余字符污染PDF
exit;

其他排查点 #

• 确认PHP文件开头和结尾没有多余的空白字符（比如<?php前的空格、换行，?>后的多余内容），这些都会被输出到PDF中导致文件损坏
• 确认$res['url']拼接后的路径正确，目标文件有读取权限
• 跨域场景下服务端需要配置对应的CORS头，允许前端请求获取二进制内容

内容的提问来源于stack exchange，提问作者Simone Rossaini