前端设置下载文件的名称

思路： 将下载内容的响应类型设置为blob，然后正则匹配其中的文件名，改为你想设置的名称

1. 核心代码

function getBlob() {
    let url = 'https://..' // 图片的网络链接
    window.URL = window.URL || window.weibkitURL
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url, true)
    xhr.responseType = "blob"
    xhr.onload = () => {
        if(xhr.status === 200) {
            let blob = xhr.response
            changeName(blob, url)
        }
    }
    xhr.send()
}

function changeName(blob, url) {
    const filename = '你想设置的名称'
    const index = url.lastIndexOf('/')
    let name = url.substring(index + 1, url.length)
                  .replace(/(.*?)/gi,(match, p1)=>{
                      return match.replace(p1, filename)
                  })
    let a = document.createElement('a')
    a.download = 'name'
    a.style.display = 'none'
    a.href = URL.createObjectURL(blob)
    document.body.appendChild(a)
    a.click()
    URL.revokeObjectURL(a.href)
    document.body.removeChild(a)
}

2. 理解xhr的responseType

设置responseType，可以改变响应类型，就是告诉服务器你期望的响应格式

responseType 的类型如下：

1. DOMString

   在JS中，DOMString 其实就是 String。 规范解释说 DOMString 指的是UTF-16字符串，而JS使用的正是这种编码的字符串。

2. ArrayBuffer对象

   MDN： ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

   它是一个字节数组，通常在其他语言中称为“byte array”。

   你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

   二进制就是 0111001101 之类的， 缓冲就是写在内存中但是暂时不取出来

   ArrayBuffer 存在的意义就是作为数据源提前写入在内存中，提前定死在某个区域，长度也固定，万年不变，于是当我们要处理这个 ArrayBuffer 中的数据时，例如，分别8位，16位，32位转换一遍，这个数据都不会变化。

3. Blob对象

   Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

   Blob更多时候运用在图片二进制形式的上传和下载，虽然它可以实现几乎任意文件的二进制传输。

   正如上文代码中，在下载图片时更改图片文件名，使用的就是blob方式。这种方式下载的图片，其URL不是传统的HTTP， 也不是Base64 URL， 二十blob形式，如: blob:http%3A//www.baidu.com/2bfaa

   Blob的属性

   Blob对象有两个属性，

   属性名	类型	描述
   size	unsigned long long	Blob 对象中所包含数据的大小（字节）。只读
   type	DOMString	一个字符串，表明该 Blob 对象所包含数据的 MIME 类型，如：application/json。如果类型未知，则该值为空字符串。

剩下的两种， json、 text 就没必要赘述了。