Vue3实现文件下载完成后自动跳转至主页的方案咨询

问题背景 #

当前通过固定3秒定时器跳转主页，无法精准匹配文件下载完成时机，需改为下载完成后立即触发跳转。

修改后的完整代码 #

<script setup lang="ts">
const goToMain = () => {
  router.push({
    name: ERouteName.PAGE_HOME
  })
}

try {
  const { query } = router.currentRoute.value
  const { url } = await clientStore.uploadAppealFile(query.file_id as string)

  if (url) {
    // 通过Fetch主动下载文件，监听完成状态
    fetch(url)
      .then(response => {
        // 检查响应是否正常
        if (!response.ok) throw new Error('文件下载请求失败')
        return response.blob()
      })
      .then(blob => {
        // 创建Blob下载链接
        const blobUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = blobUrl
        // 从URL解析文件名（可根据实际需求调整）
        link.download = url.split('/').pop() || 'download'
        link.click()
        // 释放Blob URL资源，避免内存泄漏
        URL.revokeObjectURL(blobUrl)
        // 下载完成后跳转主页
        goToMain()
      })
      .catch(error => {
        console.error('文件下载失败:', error)
        // 下载失败也执行跳转
        goToMain()
      })
  } else {
    // 未获取到下载链接直接跳转
    goToMain()
  }
} catch (error) {
  console.error('获取下载链接失败:', error)
  goToMain()
}
</script>

关键改动说明 #

• 简化goToMain函数：移除定时器参数，直接执行路由跳转，摒弃冗余的定时逻辑。
• 替换下载触发方式：放弃原生<a>标签点击（无法监听下载完成事件），改用fetch主动请求文件资源，通过Promise回调精准监听下载完成状态。
• 资源清理：使用URL.revokeObjectURL释放Blob链接资源，避免内存泄漏。
• 异常处理增强：在文件请求、下载阶段分别添加异常捕获，确保无论成功失败都能执行跳转逻辑。

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