浏览器响应

Content-Disposition 响应头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

  2. //强制浏览器以附件下载
  3. response.setHeader("content-disposition", "attachment;filename=" + fileName);
  7. //浏览器尝试打开
  8. response.setHeader("content-disposition", "inline;filename=" + fileName);

  • 浏览器会根据资源类型去判断是否支持，如果支持时会尝试去在页面上展示该资源。浏览器判断资源类型是根据返回头 Content-Type 的值

    直接下载

  • window.location.href = url

  • window.open(url) // 会新开窗口下载，体验不好
  • window.open(url,"_self")

注意：在当前页面使用location.href = url 或open(url,"_self")时，如果请求的是浏览器支持展示的格式，浏览器地址就会跳转到对应url，并直接展示，否则作为附件下载。所以说浏览器支持展示的文件等于是不能下载的。

iframe下载

  1. function download(){
  2.   const ifm = document.createElement("iframe");
  3.   ifm.style.display = "none";
  4.   ifm.src = downloadFileUrl;
  5.   document.body.appendChild(ifm);
  6. }

  • 无法监听onLoad事件监听文件下载完毕

    a标签 download

    1. function download(){
    2.   const a = document.createElement("a") 
    3.   a.style.display="none" 
    4.   a.href=url 
    5.   a.setAttribute("download",fileName) // 设置a为下载属性，并设置下载文件名
    6.   document.body.appendChild(a) 
    7.   a.click()
    8.   document.body.removeChild(a) 
    9. }

  • HTML5新增

  • download只适用于同源 URL，不能跨域

  • 能下载各种文件

    a标签 blob

    请求时指定responseType属性为blob

  • 请求可能需要处理成Blob对象

  • 然后使用URL.createObjectUrl将 Blob 对象转为 blob:URL

  • 最后再使用 a 标签 download下载

    1. downloadFile (path, name) {
    2.   const xhr = new XMLHttpRequest();
    3.   xhr.open('get', path);
    4.   xhr.responseType = 'blob';
    5.   xhr.send();
    6.   xhr.onload = function () {
    7.       if (this.status === 200 || this.status === 304) {
    8.           // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
    9.           if ('msSaveOrOpenBlob' in navigator) {
    10.               navigator.msSaveOrOpenBlob(this.response, name);
    11.               return;
    12.           }
    13.           // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
    14.           // const url = URL.createObjectURL(blob);
    15.           const url = URL.createObjectURL(this.response);
    16.           const a = document.createElement('a');
    17.           a.style.display = 'none';
    18.           a.href = url;
    19.           a.download = name;
    20.           document.body.appendChild(a);
    21.           a.click();
    22.           document.body.removeChild(a);
    23.           URL.revokeObjectURL(url);
    24.       }
    25.   };
    26. }

  • 可以构建请求，添加 header 信息，可以跨域

  • 可以监听进度
  • 缺点：要接收完整个Blob对象再转成URL形式，Blob大小有限制，堆内存可能也会爆炸，不适用于大文件下载场景

    Blob对象的Max Size，在Chrome上是2GB，Firefox是800MiB，其他浏览器略有差异


参考

浏览器文件操作