总结:
1.form表单提交
优点:传统方式,兼容性好,不会出现url长度限制问题
缺点: 无法知道下载的进度;无法直接下载浏览器可直接预览的文件类型(如txt/png等)
2.open或location.href
优点: 简单方便直接
缺点:会出现URL长度限制问题;需要注意url编码问题;浏览器可直接浏览的文件类型是不提供下载的,如txt、png、jpg、gif等;不能添加header,也就不能进行鉴权;无法知道下载的进度
3.a标签的download
优点:能解决不能直接下载浏览器可浏览的文件
缺点:必须已知下载文件地址;不能下载跨域下的浏览器可浏览的文件;有兼容性问题,特别是IE;不能进行鉴权
4.blob对象(转成2进制文件)
优点:能解决不能直接下载浏览器可浏览的文件;可设置header,也就可添加鉴权信息
缺点:兼容性问题,IE10以下不可用;
exp:
// 根据url 下载文件和图片
export function downloadFile(path){
const re = new RegExp('(.jpg|.png|.gif|.ps|.jpeg|.pdf)$')
if (re.test(path.toLowerCase())) {
// 图片
const x=new XMLHttpRequest();
x.open('GET', path, true);
x.responseType = 'blob';
x.onload=function(){
const url = window.URL.createObjectURL(x.response)
const a = document.createElement('a');
a.href = url
a.download = ''
a.click()
}
x.send();
} else {
// 文件
window.location.href = path
}
}
5.利用base64
优点:能解决不能直接下载浏览器可浏览的文件;可设置header,也就可添加鉴权信息
缺点:兼容性问题,IE10以下不可用