思路： 将下载内容的响应类型设置为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 的类型如下：
| 值 | 数据类型 |
|---|---|
| '' | DOMString（默认类型，UTF-16） |
| arraybuffer | ArrayBuffer 对象 |
| blob | Blob对象 |
| json | JS对象 |
| text | DOMString |
-
DOMString
在JS中，
DOMString其实就是String。 规范解释说DOMString指的是UTF-16字符串，而JS使用的正是这种编码的字符串。 -
ArrayBuffer对象
MDN：
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。
你不能直接操作
ArrayBuffer的内容，而是要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。二进制就是
0111001101之类的， 缓冲就是写在内存中但是暂时不取出来ArrayBuffer存在的意义就是作为数据源提前写入在内存中，提前定死在某个区域，长度也固定，万年不变，于是当我们要处理这个ArrayBuffer中的数据时，例如，分别8位，16位，32位转换一遍，这个数据都不会变化。 -
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 就没必要赘述了。
