浅析HTML5中的download属性使用

var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});

如果需要实现一些简单的文本或 JS 字符串之类的文件下载，可以通过将文本信息转成 blob 二进制流，生成一个 Blob URL，配合

download

属性完成下载，代码如下。

const downloadText = (text, filename = '') {
const a = document.createElement('a')
a.download = filename
const blob = new Blob(
, {type: 'text/plain'})
// text指需要下载的文本或字符串内容
a.href = window.URL.createObjectURL(blob)
// 会生成一个类似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
document.body.appendChild(a)
a.click()
a.remove()
}

这种 Blob URL 与常见的 HTTP URL 有什么区别呢？

Blob URL / Object URL是一种伪协议，可以让Blob和File对象用作图像和二进制数据下载链接等URL源。

浏览器在内部通过

URL.createObjectURL()

创建一个对 Blob 或 File 对象的特殊引用，生成的 Blob URL 只能在浏览器本地的单个实例和同一会话中使用，并且这个 URL 对象会在页面退出的时候被浏览器释放。

因此 Blob URL 并不能指向一个服务器资源 ，你无法在其它页面中打开它。同时由于编码格式有所差别，Blob URL 比起 Data URLs 所占的空间资源更少，性能也更好。

Blob 为 Web 开发提供了一个非常有用的功能：创建 Blob URL。将二进制数据封装为 Blob 对象，然后使用

URL.createObjectURL()

生成 Blob URL，由于Blob URL本身就是一个同源URL，可以使用该 URL 配合

download

解决跨域资源的下载以及命名问题。

解决方案

通过 Blob 和 Fetch 可以解决跨域和文件命名的问题：使用

fetch

获取跨域资源返回一个blob 对象并生成一个 Blob URL，配合

<a>

标签的

download

属性触发下载，代码如下：

function download(href, filename = '') {
const a = document.createElement('a')
a.download = filename
a.href = href
document.body.appendChild(a)
a.click()
a.remove()
}
function downloadFile(url, filename='') {
fetch(url, {
headers: new Headers({
Origin: location.origin,
}),
mode: 'cors',
})
.then(res => res.blob())
.then(blob => {
const blobUrl = window.URL.createObjectURL(blob)
download(blobUrl, filename)
window.URL.revokeObjectURL(blobUrl)
})
}

此时再点击下载，可以正常的将跨域图片下载到本地了。