前端一般通过创建a标签下载文件
图片:分为本地和后端传,本地直接require引入路径后创建a标签下载:
private downFun() {
let a=document.createElement('a')
a.style.display = 'none'
a.setAttribute('download', 'bg.jpg')
a.href = require('@/assets/bg.jpg')
document.body.appendChild(a)
console.log('href', a.href)
a.click()
document.body.removeChild(a)
}
后端传的话需要调用get接口。
其它文件类型下载基本都是一样的 调用后端get接口,使用blob类型
responseType: 'blob'。进行下载
注意:如果要是本地下载一些静态资源(除图片外) 资源要放在public目录文件下,不然打包后路径你会发现很多报错,下载找不到路径。@这个不会被解析。
附下载代码:
async download(){
console.log(this.urlName)
let res = await axios.get(`jt/${this.urlName}`, { responseType: 'blob' })
const url = window.URL.createObjectURL(res.data)
const link = document.createElement('a')
link.href = url;
link.setAttribute('download', `${this.urlName}`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
jt/${this.urlName}
jt是public下的一个文件夹, this.urlName是你要下载的文件的名字。