createObjectURL()
objectURL = URL.createObjectURL(_object_);
参数:object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值:
一个DOMString包含了一个对象URL,该URL可用于指定源 object的内容。
效果相当于为参数对象创建一个新的URL对象,该URL的生命周期与创建它窗口的document绑定。浏览器在document卸载时会自动释放该URL对象,但建议通过URL.revokeObjectURL(objectURL)来释放空间
File 与 Blob
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
用法
例子:下载文件的需求
需求:选择一个文件,点击下载按钮,请求后端,根据后端返回的数据,将返回的数据下载到本地。
解决:
参考中createObjectURL()
的用法,将返回的数据转为Blob格式,然后通过createObjectURL()
方法为该Blob对象生成一个URL,将该URL赋值给一个a标签的属性,将该a标签添加到DOM中,模拟点击,从而实现文件的下载。
代码参考(思路,非实际代码):
let res = response // 这里response为请求返回的后端需要下载的文件
const blob = new Blob([res]) // 将返回值转为Blob对象
let url = window.URL.createObjectURL(blob) // 为该Blob对象生成新的URL对象
let a = document.createElement('a')
document.body.append(a)
a.href = url
a.download = '123.rar' // 为下载的文件命名
a.click()
window.URL.revokeObjectURL(url)