一. 使用 window.open()
- 使用场景
// 1. 先封装一个实习下载的函数
export const download = (path) => {
window.open('下载的接口，例如：/fs/download?path' + path)
}
// 2. 使用：在需要下载的地方调用download函数，传入下载的url
download(path)
- 可能出现的问题
- 页面闪烁
- 如果是嵌入在别的模块中可能无法下载
- 解决办法：造成上述问题的原因都是window.open()默认打开一个新窗口
export const download = (path) => {
window.location.href = '下载的接口，例如：/fs/download?path' + path //不闪屏
}
二. 使用 a 标签
- a标签download下载
<!-- href是下载资源的相对路径 -->
<a href="./margin塌陷1.jpg" download target="_blank">点击我下载</a>
可以看到图片、markdown、word都可以正常下载
- a标签 + fetch实现下载
// 封装download函数
export const download = (href, method = 'GET', data = null, newName = '') => {
let params = {
method,
header: {'Content-Type': 'application/json;charset=utf-8' },
}
if(method == 'post' || method == 'POST'){
params['body'] = JSON.stringify(data)
}
fetch(href, params).then(res => {
res.blob().then(blob => {
let a = document.createElement('a')
document.body.appendChild(a)
let url = window.URL.createObjectURL(blob)
a.href = url
a.download = newName ? newName : (res.headers.get('filename') ? decodeURI(res.headers.get('filename')) : 'file')
a.click()
window.URL.revokeObjectURL(url)
a.remove()
this.$message.success('下载成功！')
})
}).catch(() => {
this.$message.error('下载失败！')
})
}
// 引用下载
download('/fs/download?path=' + path, 'GET', null, filename)
