Framework7 请求下载文件教程：解决二进制文件空白问题与后端配置实践

// 假设 $f7 已经初始化为 Framework7 实例
// 例如：const $f7 = new Framework7(); 或通过组件访问 this.$f7

function downloadFile(fileId, userId, loginTime, fileName = 'downloaded_file.pdf', fileType = 'application/pdf') {
  $f7.request({
    method: 'POST',
    url: 'https://yourwebsite.com/api/getFile.php', // 替换为你的后端文件下载接口
    crossDomain: true, // 如果前端和后端域名不同，需要设置为 true
    data: {
      file_id: fileId,
      user_id: userId, // 用于安全验证
      login_time: loginTime // 用于安全验证
    },
    // 关键配置：指定 XHR 响应类型为 'blob'
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data, status, xhr) {
      if (data) {
        // 创建 Blob 对象
        // data 此时已经是 Blob 类型，无需再次封装，但为了兼容性或特定场景，可以保留
        // var blob = new Blob([data], { type: fileType }); // 如果 data 已经是 Blob，则此步可简化
        var blob = data; // xhrFields: { responseType: 'blob' } 使得 data 直接就是 Blob

        // 创建一个 URL 对象，指向 Blob 数据
        var url = window.URL.createObjectURL(blob);

        // 创建一个隐藏的 <a> 标签用于下载
        var link = document.createElement('a');
        link.href = url;
        link.download = fileName; // 设置下载的文件名
        document.body.appendChild(link); // 必须将 link 添加到 DOM 才能触发 click
        link.click(); // 模拟点击下载
        document.body.removeChild(link); // 下载完成后移除 link 元素

        // 释放 Blob URL
        window.URL.revokeObjectURL(url);
      } else {
        $f7.dialog.alert('文件下载失败：未收到数据。');
      }
    },
    error: function(xhr, status) {
      console.error('文件下载请求失败:', status, xhr);
      $f7.dialog.alert('文件下载请求失败，请稍后再试。');
    }
  });
}

// 示例调用
// downloadFile('your_file_id', 'your_user_id', 'your_login_time', 'report.pdf', 'application/pdf');

<?php
// 1. 安全性检查：验证用户身份和权限
// 确保请求参数存在且合法
if (!isset($_POST['file_id']) || !isset($_POST['user_id']) || !isset($_POST['login_time'])) {
    http_response_code(400); // Bad Request
    die('缺少必要的参数。');
}

$fileId = $_POST['file_id'];
$userId = $_POST['user_id'];
$loginTime = $_POST['login_time'];

// 实际应用中，这里需要进行更严格的身份验证和权限检查
// 例如，查询数据库验证 fileId 是否属于 userId，loginTime 是否有效等
// ... 验证逻辑 ...
// 如果验证失败：
// http_response_code(403); // Forbidden
// die('无权访问此文件。');

// 2. 获取文件路径
// 假设你有一个函数或数据库查询来根据 fileId 获取真实的文件路径和文件名
function getFileInfoById($id) {
    // 实际应用中，这里会从数据库查询文件信息
    // 为演示目的，我们硬编码一个文件
    $basePath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'; // 假设文件存储在 uploads 目录下
    $filePath = $basePath . 'example.pdf'; // 示例文件路径
    $fileName = 'my_document_' . $id . '.pdf'; // 示例文件名
    $fileMimeType = 'application/pdf'; // 示例 MIME 类型

    // 检查文件是否存在且可读
    if (!file_exists($filePath) || !is_readable($filePath)) {
        return null;
    }

    return [
        'path' => $filePath,
        'name' => $fileName,
        'mime' => $fileMimeType
    ];
}

$fileInfo = getFileInfoById($fileId);

if (!$fileInfo) {
    http_response_code(404); // Not Found
    die('文件不存在或无法访问。');
}

$filePath = $fileInfo['path'];
$fileName = $fileInfo['name'];
$fileMimeType = $fileInfo['mime'];

// 3. 设置 HTTP 响应头
// 清除任何可能存在的输出缓冲区，防止在发送文件内容之前输出额外数据
if (ob_get_level()) {
    ob_end_clean();
}

// 告知浏览器这是一个文件下载
header('Content-Description: File Transfer');
// 设置文件的 MIME 类型
header('Content-Type: ' . $fileMimeType);
// 强制浏览器下载文件，并指定文件名
header('Content-Disposition: attachment; filename="' . basename($fileName) . '"');
// 禁用缓存
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
// 设置文件大小，有助于浏览器显示下载进度
header('Content-Length: ' . filesize($filePath));

// 4. 读取并输出文件内容
readfile($filePath);

exit; // 确保脚本在此处终止，不再输出任何其他内容
?>