Vue项目中提供可下载文件前执行操作的实现方法

核心思路 #

放弃重定向方案，改为先执行跟踪请求，再主动触发浏览器下载行为。重定向仅改变URL，无法强制浏览器触发下载（尤其是浏览器能直接预览的文件，比如txt、图片），必须通过主动创建下载链接或处理文件流来实现。

实现步骤 #

1. 配置路由规则 #

在Vue Router中添加带跟踪参数的路由，确保它优先匹配（避免被正常文件路由拦截）：

const routes = [
  // 带跟踪后缀的文件路由，放在正常文件路由之前
  {
    path: '/:filePath+/:trackingSource',
    name: 'TrackedFileDownload',
    component: TrackedDownloadComponent,
    props: true
  },
  // 正常文件访问路由（如果需要）
  {
    path: '/:filePath+',
    name: 'NormalFile',
    // 静态文件服务相关配置
  }
]

这里/:filePath+会匹配多级路径（比如some/path/file-name.txt），:trackingSource捕获跟踪来源参数。

2. 编写跟踪下载组件 #

创建TrackedDownloadComponent.vue，在组件初始化时完成跟踪请求，再触发下载：

<template>
  <!-- 无需渲染内容，仅执行逻辑 -->
</template>

<script setup>
import { onMounted } from 'vue'
import axios from 'axios'

const props = defineProps({
  filePath: String,
  trackingSource: String
})

onMounted(async () => {
  try {
    // 1. 发送跟踪请求
    await axios.post('/api/track-download', {
      filePath: props.filePath,
      source: props.trackingSource
    })

    // 2. 触发文件下载
    const realFileUrl = `/${props.filePath}`
    // 方式1：直接创建a标签触发（适合公开静态文件）
    const link = document.createElement('a')
    link.href = realFileUrl
    link.download = props.filePath.split('/').pop() // 提取文件名
    link.target = '_blank'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    // 方式2：用axios获取文件流（适合需要权限验证的文件）
    // const response = await axios.get(realFileUrl, {
    //   responseType: 'blob'
    // })
    // const blob = new Blob([response.data])
    // const url = window.URL.createObjectURL(blob)
    // const link = document.createElement('a')
    // link.href = url
    // link.download = props.filePath.split('/').pop()
    // link.click()
    // window.URL.revokeObjectURL(url)

    // 可选：跳回原页面或关闭当前窗口（如果是新打开的）
    setTimeout(() => {
      window.close()
    }, 1000)
  } catch (error) {
    console.error('跟踪或下载失败:', error)
    // 处理错误，比如跳转到错误页或提示用户
  }
})
</script>

3. 注意事项 #

• 路由顺序：带跟踪参数的路由必须放在正常文件路由之前，否则会被正常路由拦截。
• 文件权限：如果文件需要权限验证，必须用方式2（获取文件流），确保请求携带用户凭证（比如token）。
• 浏览器兼容性：download属性对跨域文件可能无效，此时需要后端配合返回Content-Disposition: attachment响应头强制下载。
• 错误处理：跟踪请求失败时，可选择继续下载或终止，根据业务需求调整。

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