vue 前端实现下载逻辑

export function fileDownload(row) {
  if (!row.fileUrl) {
    this.$message.warning('文件地址为空');
    return;
  }

  // 解析文件名（保持原逻辑）
  const cleanUrl = String(row.fileUrl).replace(/\/+$/, '');
  const fileName = cleanUrl.split('/').pop() || 'download';

  // 纯前端 fetch + Blob 下载（绕开 iframe 跨域限制）
  fetch(row.fileUrl, {
    method: 'GET',
    mode: 'cors', // 允许跨域请求（关键：不会触发框架访问限制）
    credentials: 'omit' // 不携带 Cookie（若文件需要登录态，改为 'include'，但需文件服务器允许）
  })
    .then(response => {
      // 检查响应是否成功（200-299 状态码）
      if (!response.ok) {
        throw new Error(`文件请求失败，状态码：${response.status}`);
      }
      // 将响应转为 Blob（文件流）
      return response.blob();
    })
    .then(blob => {
      // 生成 Blob 下载链接（同源，无跨域）
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName; // 自定义文件名
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();

      // 清理资源（避免内存泄漏）
      setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      }, 100);

      this.$message.success('文件下载成功');
    })
    .catch(error => {
      console.error('下载失败:', error);
      // 降级处理：提示用户手动复制链接下载（纯前端无法突破跨域限制时）
      this.$message.error(`文件下载失败，可复制链接手动下载：\n${row.fileUrl}`);
      // 可选：自动复制链接到剪贴板
      navigator.clipboard.writeText(row.fileUrl).then(() => {
        this.$message.info('链接已自动复制到剪贴板');
      }).catch(() => {
        // 剪贴板复制失败时忽略
      });
    });
}
 调用
 import  {fileDownload} from '@/utils/down.js'
   fileDownload(row){
      fileDownload(row);
    },