form表单提交下载（淘汰）

通过创建一个form元素来提交表单发起一个请求从而实现下载。

window.open()或location.href下载

window.open('downloadFile.zip');

location.href = 'downloadFile.zip';

缺点

• 会出现URL长度限制
• 浏览器可直接浏览的文件类型不能下载，如txt、png、jpg、gif等
• 不能添加header，不能进行鉴权
• 无法知道下载的进度

a标签下载

<a href="example.jpg" download="xxx.jpg">点击下载</a>

优点

• 能解决不能直接下载浏览器可浏览的文件
• 支持blob URL、base64

缺点

• 无法跨域下载
• 不能进行鉴权

xhr请求下载

/**
 * 下载文件
 * @param {String} path - 下载地址/下载请求地址。
 * @param {String} name - 下载文件的名字（考虑到兼容性问题，最好加上后缀名）
 */
downloadFile (path, name) {
    const xhr = new XMLHttpRequest();
    xhr.open('get', path);
    xhr.responseType = 'blob';
    xhr.send();
    xhr.onload = function () {
        if (this.status === 200 || this.status === 304) {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(this.response);
            fileReader.onload = function () {
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = this.result;
                a.download = name;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            };
        }
    };
}

优点

• 支持非同源图片
• 支持鉴权

blob下载

通过URL.createObjectURL()创建object url，再通过a标签下载。

base64下载

使用FileReader()将Blob或者File转成base64，再通过a标签进行下载。

FileSaver

提供支持url，blob，file的格式下载。

优点

• 支持非同源的URL，前提是有提供Access-control-allow-origin头部

canvas画布下载

下载url的图片，然后放到canvas中，再调用toBlob()或者toDataURL()转成blob或base64，再通过a标签进行下载。

支持非同源图片

附件形式下载

Content-Disposition: attachment; filename="mouth.png"

Range范围下载

Range请求头

Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>

unit：范围请求所采用的单位，通常是字节（bytes）。

<range-start>：一个整数，表示在特定单位下，范围的起始值。

<range-end>：一个整数，表示在特定单位下，范围的结束值。这个值是可选的，如果不存在，表示此范围一直延伸到文档结束。

大文件分块并发下载

利用Range请求头