一. 使用 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 = urla.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)
)
