文件下载

一、触发浏览器自动下载的url
  • response header中指定了Content-Dispositionattachment,它表示让浏览器把响应体作为附件下载到本地
  • response header中指定了Content-Typeapplication/octet-stream或者 application/zip以及其它几个不常见类型。application/octet-stream表示http response为二进制流,没指定明确的type,需要下载到本地由系统决定或者用户手动指定打开方式。


二、下载方式
  1. <iframe src=''>

    只要满足上述「触发浏览器自动下载」的url,就能通过iframe的形式。一般的用法是在html中隐藏iframe,然后在业务代码中通过设置iframe的src来实现下载。

  1. <a href='' download>

    主流浏览器对于的特殊情况说明:

    • Safari只支持能「触发浏览器自动下载」的url
    • Firefox也只支持能「触发浏览器自动下载」的url
      • 点击a标签会触发「浏览器离开当前页面」的行为,解决这个问题的方式是「再搭配一个iframe, 将a标签的target指向这个iframe」,这样就不会有页面跳转了
    • Chrome对于不能「触发浏览器自动下载」的url,也可以通过这种方式下载
  1. window.location.href

    1
    2
    3
    4
    5
    # 此方法火狐有些版本是不支持的
    window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********';

    # 为了解决火狐有些版本不支持,可以改成这种方式
    window.location = 'https://*****.oss-cn-**.aliyuncs.com/*********';
  2. form表单,利用form.submit()事件

  3. window.open

  4. XMLHttpRequest

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function ajax(url, cb) {
    const xhr = new XMLHttpRequest();
    xhr.open('get', url);
    // ""、"text"-字符串 、"blob"-Blob对象 、"arraybuffer"-ArrayBuffer对象
    xhr.responseType = "blob";
    xhr.onload = function() {
    cb(xhr.response);
    };
    xhr.send();
    }
    ajax('fileUrl', data => {
    let aEl = document.createElement('a');
    aEl.href = URL.createObjectURL(data);
    aEl.download = params.fileName;
    aEl.click();
    URL.revokeObjectURL(aEl.href);
    });