前端文件下载方式
引言
在前端开发中，文件下载是一个常见的需求。后端可能以不同的方式返回文件数据，前端需要根据不同的返回类型采用相应的处理方式。本文将总结几种常见的后端返回类型及对应的前端处理方案，主要基于Vue3和JavaScript环境。
一、后端返回文件URL
场景描述
后端直接返回文件的访问URL，通常是静态文件或已存储在服务器上的文件。
前端处理方式
// 直接使用window.open或创建a标签下载
function downloadByUrl(url, filename) {const a = document.createElement('a')a.href = urla.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')
}
注意事项
- 适用于公开可访问的文件
- 可能需要处理跨域问题
- 对于大文件更高效，因为浏览器可以管理下载过程
二、后端返回二进制流（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 = downloadUrla.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])
注意事项
- 需要正确设置
responseType: 'blob' - 及时释放创建的URL对象，避免内存泄漏
- 可以处理需要认证的私有文件
三、后端返回Base64字符串
场景描述
后端返回Base64编码的文件数据，通常以字符串形式返回。
前端处理方式
function downloadByBase64(base64Data, filename, mimeType) {// 去除可能的Base64前缀const base64WithoutPrefix = base64Data.replace(/^data:.+;base64,/, '')// 转换为字节数组const byteCharacters = atob
