响应流文件下载和批量下载

项目开发过程中，会有一些文件的下载或者批量下载的功能，当后端响应回来的是以流的形式，该怎么处理呢？？？

模仿a链接

如果模仿a链接进行下载呢？

<a href="url链接" download="下载后文件名称"></a>

<a href="/images/myw3schoolimage.jpg" download="w3logo"></a>

点击超链接后进行下载链接的资源，以及重命名。

使用a链接进行流的下载

流程分为以下几步

1. 准备工作，请求响应流的url和文件下载后的名称。
2. 创建request请求，进行设置头部信息、请求类型和响应类型，并发送请求。
3. 接收到响应，模仿a链接，把响应流转为Blob类型，并转成资源url，赋值给a链接中的href属性，文件的名称赋值给download属性。
4. 模仿点击、移除a链接和释放URL资源。

// 请求地址
var Api = "api接口地址"
// 模拟请求
var xhr = new XMLHttpRequest()
// 文件名称
var fileName = 'a.zip' 
xhr.open('GET', Api, true)
// 头部添加自定义的参数，比如：灰度标识
xhr.setRequestHeader("grayUser", 'true')
// 设置响应类型
xhr.responseType = 'arraybuffer'
// 请求
xhr.send()
// 响应
xhr.onload = function() {
    if (this.status === 200) {
        var type = xhr.getResponseHeader('Content-Type')

        // 二进制流转换blob类型
        var blob = new Blob([this.response], {type: type})
        if (typeof window.navigator.msSaveBlob !== 'undefined') {

            window.navigator.msSaveBlob(blob, fileName)
        } else {
        	// 兼容
            var URL = window.URL || window.webkitURL
            // 将Blob类型转为资源链接，就是a链接的href属性的值
            var objectUrl = URL.createObjectURL(blob)
            if (fileName) {
                var a = document.createElement('a')
                if (typeof a.download === 'undefined') {
                    window.location = objectUrl
                } else {
                    a.href = objectUrl
                    // 给a链接中属性download赋值，命名文件名称
                    a.download = fileName
                    document.body.appendChild(a)
                    // 模拟自发点击，以及移除
                    a.click()
                    a.remove()
                }
            } else {
                window.location = objectUrl
            }
            // 释放资源
            window.URL.revokeObjectURL(objectUrl);
        }
    }
}

1. 实现动态名称和后缀，在下载文件之前，肯定有一个进行文件的信息展示，可以把文件的名称和后缀进行传输过来。
2. 单文件和打包后的压缩包，单文件或者多文件是以文件名进行区分。