iOS端Chrome浏览器中如何下载React页面的视频？

核心原因 #

iOS Safari对<a>标签指向视频资源的默认行为是优先打开播放，而非触发下载，除非明确告知浏览器这是下载操作。

解决方案1：添加download属性（基础版） #

修改你的下载函数，给动态创建的<a>标签加上download属性并指定文件名，这是让iOS Safari识别下载操作的关键：

const downloadFile = (url: string, filename: string) => {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename; // 指定文件名，告诉浏览器执行下载
  a.click();
};

调用时传入视频文件名，比如downloadFile('https://your-video-url.mp4', 'my-video.mp4')。

解决方案2：转为Blob下载（跨域/复杂场景） #

如果视频资源是跨域的，直接加download属性可能失效，此时需要先把视频转为Blob对象，再生成本地URL进行下载：

const downloadVideo = async (url: string, filename: string) => {
  try {
    // 拉取视频资源转为Blob
    const response = await fetch(url);
    const blob = await response.blob();
    // 创建本地Blob URL
    const blobUrl = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename;
    a.click();
    
    // 下载完成后释放Blob URL，避免内存泄漏
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('视频下载失败:', error);
    // 这里可以给用户显示错误提示，比如引导用备用方案
  }
};

备用兜底方案 #

如果以上方法都无法生效，可以引导用户长按页面中的视频播放器，iOS Safari原生支持长按视频弹出「保存视频」的选项，这是系统级的功能，兼容性最好。

注意事项 #

• 确保视频的MIME类型是iOS支持的格式（比如video/mp4），小众格式可能无法触发下载
• 网站和视频资源都要使用HTTPS协议，iOS对HTTP资源的下载限制较多

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