总结:

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以下不可用