前端下载文件的5种方法的对比

总结：

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