【vue3+js】文件下载方法整理

前端文件下载方式

引言

在前端开发中，文件下载是一个常见的需求。后端可能以不同的方式返回文件数据，前端需要根据不同的返回类型采用相应的处理方式。本文将总结几种常见的后端返回类型及对应的前端处理方案，主要基于Vue3和JavaScript环境。

一、后端返回文件URL

场景描述

后端直接返回文件的访问URL，通常是静态文件或已存储在服务器上的文件。

前端处理方式

// 直接使用window.open或创建a标签下载
function downloadByUrl(url, filename) {
   
   
  const a = document.createElement('a')
  a.href = url
  a.download = filename || url.split('/').pop(); // 设置下载文件名
  a.style.display = 'none';
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  
  // 或者简单方式 在新标签页打开
  // window.open(url, '_blank')
}

Vue3中使用示例

import {
   
    ref } from 'vue'

const fileUrl = getApiURL()//获取接口返回的下载链接

const handleDownload = () => {
   
   
  downloadByUrl(fileUrl.value, 'myfile.pdf')
}

注意事项

1. 适用于公开可访问的文件
2. 可能需要处理跨域问题
3. 对于大文件更高效，因为浏览器可以管理下载过程

二、后端返回二进制流（Blob）

场景描述

后端接口返回二进制流数据，通常设置responseType: 'blob'。

控制台响应中返回的是file类型

前端处理方式

需要现在接口请求的地方，设置响应类型

import axios from 'axios'

async function downloadByBlob(apiUrl, filename) {
   
   
  try {
   
   
  //请求接口地址
    const response = downloadTemp(apiUrl);
    const blob = new Blob([response.data])
    const downloadUrl = window.URL.createObjectURL(blob)
    
    const a = document.createElement('a')
    a.href = downloadUrl
    a.download = filename || 'download'
    
    document.body.appendChild(a)
    a.click()
    // 清理
    window.URL.revokeObjectURL(a.href)
    document.body.removeChild(a)
  } catch (error) {
   
   
    console.error('下载失败:', error)
  }
}

// Vue3中使用示例
const handleBlobDownload = async () => {
   
   
  await downloadByBlob('/api/download', 'document.pdf')
}

请求接口的时候 也可以在请求的时候设置响应类型
const response = downloadTemp(apiUrl, {
  responseType: 'blob' // 关键设置
})
这里要看接口返回的有没有data 如果是一整个res都是file 这里直接写res
const blob = new Blob([response]);
const blob = new Blob([response.data])

注意事项

1. 需要正确设置responseType: 'blob'
2. 及时释放创建的URL对象，避免内存泄漏
3. 可以处理需要认证的私有文件

三、后端返回Base64字符串

场景描述

后端返回Base64编码的文件数据，通常以字符串形式返回。

前端处理方式

function downloadByBase64(base64Data, filename, mimeType) {
   
   
  // 去除可能的Base64前缀
  const base64WithoutPrefix = base64Data.replace(/^data:.+;base64,/, '')
  
  // 转换为字节数组
  const byteCharacters = atob(base64WithoutPrefix)