download属性如何在HTML5中使用-创新互联

这篇文章将为大家详细讲解有关download属性如何在HTML5中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

download 属性介绍

常规的 标签通过 href 实现链接跳转，如果只想下载文件而不是跳转预览，好的方式是在 标签中添加download 属性，就能很简单地实现下载操作。

download 是 HTML5 中 标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件，例如：

download

如果缺少download 属性，点击 "download" 会直接变成预览图片，当添加download 属性后则会触发图片的下载。

目前download 属性的兼容性如caniuse 中所展示的：

可以以看到，大部分主流的浏览器基本都已经支持download 属性，而 IE 的表现一如既往的感人，目前许多 Window 系统仍然在使用 IE ，这也是许多业务需求需要考虑的。这种兼容性问题限制了download 的更广泛应用。

动态资源下载

面对一些动态内容下载的业务场景，即图片等资源的地址并不是固定的（例如一些在线绘图工具所生成的图片），只使用 HTML 无法满足需求。为了能够满足不同的 URL 下载，可以通过JS 实现一个动态触发 URL 下载的方法。

function download(href, filename='')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

需要注意的是，代码中对创建的 进行的appendChild 和remove 操作主要是为了兼容 FireFox 浏览器，在 FireFox 浏览器下调用该方法如果不将创建的 标签添加到 body 里，点击链接不会有任何反应，无法触发下载，而在 Chrome 浏览器中则不受此影响。

上述的方法可以实现同源资源的下载。但在很多场景中，还需要处理跨域资源。遗憾的是，download 属性目前仅适用于同源 URL ，即如果需要下载的资源地址是跨域的，download 属性就会失效，点击链接会变成导航预览。

测试：点击下载，结果只是预览而无法下载图片。

注： Chrome65 之前是支持download 属性触发文件跨域下载的，之后则严格遵循同源策略，无法再通过download 属性触发跨域资源的下载。而 FireFox 一直不支持跨域资源的download 属性下载。

文件命名问题

download 属性不仅可以触发下载，也能指定下载文件名：

下载

如果下载文件的后缀与源文件保持一致，可以设置缺省文件名：

下载

笔者曾遇到过一个问题，通过 标签触发跨域资源下载，代码与上述的download 方法基本相同，只是在设置download 属性的地方有点不同：

a.setAttribute(download, true)

结果在老版本的 Chrome 浏览器中出现了如下情况。

下载文件名成了true 。很明显，浏览器将download 属性值读成了文件名。

经过分析，出现上述问题主要是因为：

1. 首先本不该将download 设为true ，download 与disabled 这种类型的属性值不同，它与文件名直接相关联。而且对于这种前后端响应式下载的方式，download 属性并不是必要的。

2. 在 Chrome 的早期版本不仅支持跨域资源的download 属性下载，而且还可以通过download 重置跨域资源的文件名，因此才会出现上述这种情况。

前后端配合完成文件下载的业务场景，一般是由后端设置响应头中的Content-Disposition 信息来实现。

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

如果在响应头中设置了Content-Disposition ，前端也在对应链接的 标签中添加了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"};
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([text], {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，配合 标签的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)
    })
}

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

需注意的是跨域资源所在的服务器需要配置Access-Control-Allow-Origin 信息，否则会得到一个大写的跨域报错。header 配置例如：

// 允许任何域名访问
header('Access-Control-Allow-Origin: *');

//指定域名访问
header('Access-Control-Allow-Origin: https://h6.ele.me');

目前这种方法还存在一些不足，例如浏览器会限制 Blob 数据大小不超过500M，在性能方面也会有所不足。

关于download属性如何在HTML5中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。