Skip to content

DOWNLOAD_TEST.md

Latest commit

 

History

History
184 lines (147 loc) · 4.91 KB

DOWNLOAD_TEST.md

File metadata and controls

184 lines (147 loc) · 4.91 KB

下载功能测试指南 - 增强版

🚨 问题诊断

当前问题

  • 症状：点击下载按钮后打开播放页面而不是下载文件
  • 可能原因：浏览器缓存、CORS限制、或下载函数未正确执行

解决方案

  1. 强制刷新页面：Ctrl+F5 (Windows) 或 Cmd+Shift+R (Mac)
  2. 清除浏览器缓存
  3. 使用专门的测试页面

🧪 新增测试方法

1. 使用专门的测试页面

# 访问测试页面
http://localhost:8000/download_test.html

这个页面包含：

  • 测试直接下载链接：验证基本下载功能
  • 测试 Blob 下载：验证 Blob 方法
  • 测试 API 下载：完整测试 Twitter 视频下载流程
  • 实时日志：显示详细的调试信息

2. 浏览器开发者工具检查

  1. 打开开发者工具 (F12)
  2. 切换到 Console 标签页
  3. 点击下载按钮
  4. 查看控制台输出，应该看到： 
    Download initiated for: [URL] filename: [filename]
✅ Fetch 请求成功，正在创建 Blob...
✅ Blob 创建成功，大小: [size] bytes
✅ 下载通过 Fetch + Blob 方法成功触发

🔄 修改内容详情

增强的下载函数

新版本包含三种下载方法：

  1. Fetch + Blob 方法（首选）：

    • 通过 fetch 获取视频数据
    • 创建 Blob 对象
    • 生成本地 URL 并触发下载

  2. 直接下载方法（备用）：

    • 当 Fetch 失败时使用
    • 直接设置 download 属性

  3. 新标签页方法（最后手段）：

    • 当前两种方法都失败时使用
    • 在新标签页中打开（带下载提示）

增强的用户反馈

  • 详细日志：控制台输出详细的调试信息
  • 中文通知：用户友好的状态提示
  • 错误处理：针对不同错误类型的处理

🔧 故障排除步骤

Step 1: 基本检查

# 1. 确认服务器运行状态
curl http://localhost:8000/api/health

# 2. 检查端口
PORT=8000 python3 run.py

Step 2: 清除缓存

  1. 硬刷新页面：Ctrl+F5 / Cmd+Shift+R
  2. 清除浏览器缓存：
    • Chrome: 设置 → 隐私设置和安全性 → 清除浏览数据
    • Firefox: 设置 → 隐私与安全 → 清除数据
    • Safari: 开发 → 清空缓存

Step 3: 使用测试页面

  1. 访问 http://localhost:8000/download_test.html
  2. 点击 "测试直接下载链接"：应该下载 test-direct.txt
  3. 点击 "测试 Blob 下载"：应该下载 test-blob.txt
  4. 点击 "测试 API 下载"：测试完整的 Twitter 视频下载

Step 4: 检查浏览器设置

  1. 下载设置：确保浏览器允许自动下载
  2. 弹窗拦截器：暂时禁用弹窗拦截
  3. 安全设置：降低安全级别（临时）

📋 预期行为

✅ 正确行为

  • 点击下载按钮后：
    1. 显示蓝色通知："🔄 正在下载: 文件名.mp4"
    2. 浏览器下载管理器显示下载进度
    3. 通知变为绿色："✅ 下载成功: 文件名.mp4"
    4. 文件保存到下载文件夹

❌ 错误行为

  • 打开新标签页播放视频
  • 没有任何反应
  • 显示错误消息

🌐 浏览器兼容性

支持的浏览器

  • ✅ Chrome 80+
  • ✅ Firefox 75+
  • ✅ Safari 13+
  • ✅ Edge 80+

已知问题

  • 移动 Safari：可能需要用户手动点击
  • 旧版 IE：不支持 Blob 下载

📱 移动端测试

在移动设备上：

  1. 访问网站
  2. 输入 Twitter 视频 URL
  3. 点击下载按钮
  4. 查看是否触发移动浏览器的下载功能

🛠 技术实现细节

核心改进

// 旧版本（可能打开播放页面）
window.open(url, '_blank');

// 新版本（多种下载方法）
fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const blobUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename;
    a.click();
  });

调试信息

启用详细日志记录：

  • API 请求状态
  • 下载方法选择
  • 错误信息
  • 文件大小和类型

📝 测试清单

  • 服务器正常运行 (port 8000)
  • API 健康检查通过
  • 主页面加载正常
  • 测试页面功能正常
  • 浏览器控制台无错误
  • 下载测试文件成功
  • Twitter 视频下载成功
  • 通知消息显示正常

🔄 如果问题仍然存在

方案 A: 使用强制下载链接

// 临时解决方案：强制新标签页下载
window.downloadFile = function(url, filename) {
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.target = '_blank';
    a.click();
};

方案 B: 检查视频 URL

某些 Twitter 视频 URL 可能有特殊的访问限制，尝试使用不同的视频 URL 进行测试。

方案 C: 联系支持

如果以上所有方法都失败，请：

  1. 记录浏览器控制台的完整错误信息
  2. 记录网络面板中的请求详情
  3. 提供操作系统和浏览器版本信息