文件下载

发表于
一、触发浏览器自动下载的url
  • response header中指定了Content-Disposition为attachment，它表示让浏览器把响应体作为附件下载到本地
  • response header中指定了Content-Type 为 application/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);
    });