实现Framework7与PHP后端AJAX文件下载教程

// 假设这些变量在实际应用中已定义
const urlofwebsite = 'https://your-domain.com/';
const idoffile = 'your_file_id';
const iduser = 'current_user_id';
const timeoflogin = Date.now(); // 示例：当前时间戳

$f7.request({
  method: 'POST', // 或 'GET'，取决于服务器接口设计
  url: urlofwebsite + 'api/getFile.php',
  crossDomain: true, // 如果是跨域请求，请设置为true
  data: {
    fakeid: idoffile,
    iduser: iduser, // 安全检查：传递用户ID以供服务器验证权限
    time: timeoflogin // 安全检查：传递时间戳以供服务器验证会话
  },
  // 核心配置：指示浏览器将响应视为二进制数据（Blob）
  xhrFields: {
    responseType: 'blob'
  },
  success: function(blob, status, xhr) {
    // 成功回调中直接接收到Blob对象
    if (blob && blob.size > 0) {
      // 1. 创建一个Blob URL
      const url = window.URL.createObjectURL(blob);

      // 2. 尝试从Content-Disposition头获取文件名
      let fileName = 'downloaded_file'; // 默认文件名
      const contentDisposition = xhr.getResponseHeader('Content-Disposition');
      if (contentDisposition) {
        // 正则表达式匹配 filename 或 filename*
        const match = contentDisposition.match(/filename\*?=['"]?(?:UTF-8''|)([^"';\n]+)['"]?/i);
        if (match && match[1]) {
          // 解码URL编码的文件名，并替换加号为空格（针对旧版编码）
          fileName = decodeURIComponent(match[1].replace(/\+/g, ' '));
        }
      }

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

      // 4. 释放Blob URL，防止内存泄漏
      window.URL.revokeObjectURL(url);
    } else {
      $f7.dialog.alert('文件内容为空或下载失败。');
    }
  },
  error: function(xhr, status) {
    console.error('文件下载请求失败:', status, xhr);
    $f7.dialog.alert('文件下载失败，请检查网络或稍后再试。');
  }
});

<?php
// 允许跨域请求（如果前端是跨域的）
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

// 1. 安全性检查 (重要!)
// 实际应用中，应根据 $_POST['iduser'], $_POST['time'], $_POST['fakeid']
// 或其他认证机制来验证用户是否有权下载此文件。
// 示例：这里只是一个占位符，请替换为实际的权限验证逻辑。
$userId = $_POST['iduser'] ?? '';
$fileId = $_POST['fakeid'] ?? '';
// 假设通过 fileId 查找文件路径和原始文件名
// 实际中可能从数据库查询
$allowedFiles = [
    'your_file_id' => [
        'path' => '/var/www/html/files/document.pdf', // 文件的绝对路径
        'name' => 'MyImportantDocument.pdf', // 下载时显示的文件名
        'mime' => 'application/pdf'
    ],
    // ... 更多文件映射
];

if (!isset($allowedFiles[$fileId])) {
    http_response_code(404);
    die('文件未找到或无权访问。');
}

$file_info = $allowedFiles[$fileId];
$file_path = $file_info['path'];
$original_filename = $file_info['name'];
$mime_type = $file_info['mime'];

// 进一步验证用户权限，例如：
// if (!checkUserPermission($userId, $fileId)) {
//     http_response_code(403); // Forbidden
//     die('无权下载此文件。');
// }

if (!file_exists($file_path) || !is_readable($file_path)) {
    http_response_code(404);
    die('文件未找到或服务器无法读取。');
}

// 2. 设置HTTP头信息
// 确保在任何输出（包括空格、BOM）之前设置头信息
header('Content-Description: File Transfer');
header('Content-Type: ' . $mime_type);
// Content-Disposition 强制浏览器下载文件，并指定下载时的文件名
// rawurlencode 用于处理文件名中的特殊字符，确保在HTTP头中正确传输
header('Content-Disposition: attachment; filename="' . rawurlencode($original_filename) . '"');
header('Expires: 0'); // 禁用缓存
header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); // 禁用缓存
header('Pragma: public'); // 兼容旧版浏览器
header('Content-Length: ' . filesize($file_path)); // 文件大小

// 3. 清除并关闭输出缓冲区，确保文件内容直接输出
ob_clean();
flush();

// 4. 读取并输出文件内容
readfile($file_path);
exit; // 确保不再输出其他内容，防止文件损坏
?>