浅析HTML5中的download属性使用

2020-04-24 19:28:20易采站长站整理
Content-Disposition
信息来实现。

在 HTTP 场景中,Content-Disposition 第一个参数或者是 inline(默认值,表示回复中的消息体会以页面的一部分或者整个页面的形式展示),或者是 attachment(意味着消息体应该被下载到本地;大多数浏览器会呈现一个“保存为”的对话框,将 filename 的值预填为下载后的文件名)。

如果在响应头中设置了

Content-Disposition
,前端也在对应链接的
<a>
标签中添加了
download
属性,那么此时命名规则:

如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名,HTTP 头属性优先于此属性。

经过测试发现,当 HTTP 头中

Content-Disposition
不为空时:

在 Chrome 浏览器中,不管 HTTP 头中

Content-Disposition
的第一个参数被设为 attachment 还是 inline ,只要设置了 filename,
download
就无法重置文件名。相反,当 filename 为空时,
download
属性值会被设为文件名。 在 FireFox 浏览器中,浏览器只会读取
Content-Disposition
的 filename 值,若是filename 为空,则取源文件名。此时
download
无论如何都无法重置文件名。

总结一下: 未在响应头设置

Content-Disposition
信息(例如一般直接定位资源的同源URL),
download
属性可以重置文件名。若后端在
Content-Disposition
字段中已经设置了 filename,以 filename 值为准。

对于后端已经设定了文件名的情况下,如果仍然想要对文件名进行重置,该如何处理呢?

Blob: URL

关于

download
属性还有介绍:

尽管 HTTP URL 需要位于同一源中,但是可以使用 blob: URL 和 data: URL ,以方便用户下载使用 JavaScript 生成的内容(例如使用在线绘图 Web 应用程序创建的照片)。

Blob
(Binary Large Object)即二进制大对象,这个我们并不陌生,一些数据库将Blob用来表示存储二进制文件的字段类型。File 接口也是基于 Blob,继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。Blob 对象通过 Blob 构造函数来创建:

Blob(blobParts[, options])


var debug = {hello: "world"};