前端经常会遇到下载文件的需求,后端一般提供的以下两种方法:
- 文件地址。后端直接提供要下载的文件地址,常用于图片、音视频等静态文件
- 文件流。后端返回文件流,常用于excel等动态文件
一、a 标签下载
1、直接html使用a标签下载
- href:文件链接
- download:下载时的文件名称,相当于重命名了,可以不设置该属性
html
<a href="https://example.com/images/a.png" download="b.png">下载</a>
2、通过js方法借用a标签下载
javascript
downloadFile(fileurl) {
let a = document.createElement('a') // 创建一个a标签
a.href = fileurl // 赋值链接
a.style.display = 'none' // 隐藏,设置元素不可见
document.body.appendChild(a) // 添加a到页面
a.click() // 模拟点击,进行跳转或下载操作
document.body.removeChild(a) // 操作完成,移除a
}
二、window 下载
1、window.location.href
javascript
downloadFile(fileurl) {
window.location.href = fileurl
}
2、window.open
javascript
downloadFile(fileurl) {
window.open(fileurl)
}
注: window.open() 可能会被浏览器拦截器屏蔽,而 window.location.href 不会受到影响
三、blob下载流文件
1、引入axios
javascript
import axios from 'axios'
2、blob下载
javascript
downloadFile() {
// 文件地址,可携带参数
const fileurl = `/file/example/excel/abc?id=${this.id}&appId=${this.appId}`
// 请求并下载文件,可设置 headers
axios
.get(fileurl, {
responseType: 'blob', // 必须,指定响应的数据类型为二进制数据流(Blob对象)
headers: {
'X-Auto-Fp-Plate': 'example',
},
})
.then(response => {
let url = window.URL.createObjectURL(response.data) // 将二进制文件转化为可访问的url
let a = document.createElement('a')
a.href = url
a.style.display = 'none'
document.body.appendChild(a)
// 一般在响应头的 content-disposition 里设置文件名称,下面是提取文件名示例
const arr = response.headers['content-disposition'].split('filename=')
const fileName = decodeURI(arr[arr.length - 1])
a.download = fileName // 将获取的文件名赋值过去,也可自行赋值
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(url) // 释放url
})
.catch(error => {
// do something
})
},