vue 实现文件地址
Vue 实现文件下载功能
在Vue中实现文件下载功能通常可以通过前端直接触发下载或通过后端API返回文件流。以下是几种常见方法：
前端直接下载（适用于公开URL）
对于已知的公开文件URL，可以直接通过<a>标签或window.open实现下载：
// 方法1：创建a标签下载
const downloadFile = (url, fileName) => {
const link = document.createElement('a')
link.href = url
link.download = fileName || 'downloaded-file'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
// 使用示例
downloadFile('https://example.com/file.pdf', 'document.pdf')通过Blob对象下载（适用于后端返回二进制流）
当后端返回文件流时，需要将响应数据转换为Blob对象：
// 方法2：处理API返回的二进制流
axios.get('/api/download', {
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'filename.ext')
document.body.appendChild(link)
link.click()
link.remove()
window.URL.revokeObjectURL(url)
})使用FileSaver.js库
对于更复杂的下载需求，可以使用FileSaver.js简化操作：
import { saveAs } from 'file-saver'
// 示例1：保存文本
saveAs(new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" }), "hello.txt")
// 示例2：保存API返回的文件
axios.get('/api/file', { responseType: 'blob' })
.then(res => saveAs(res.data, 'document.pdf'))处理大文件下载进度
对于大文件下载，可以添加进度提示：
axios.get('/api/large-file', {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
console.log(`下载进度: ${percentCompleted}%`)
}
}).then(response => {
// 处理下载完成逻辑
})注意事项
- 跨域问题需要后端配置CORS
- 移动端可能需要特殊处理
- 大文件下载建议分片或断点续传
- 服务端应正确设置Content-Disposition头
以上方法可根据实际项目需求选择使用，建议在组件中封装成可复用的方法。
