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

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

创新互联建站专注于金湖网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供金湖营销型网站建设，金湖网站制作、金湖网页设计、金湖网站官网定制、小程序设计服务，打造金湖网络公司原创品牌,更为您提供金湖网站排名全网营销落地服务。

download 属性介绍

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

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

<a href="result.png" download>download</a>

如果缺少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()
}

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

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

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

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

文件命名问题

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

<a href="test.png" download="joker.png">下载</a>

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

<a href="test.png" download="joker">下载</a>

笔者曾遇到过一个问题，通过<a> 标签触发跨域资源下载，代码与上述的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 ，前端也在对应链接的<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"};
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，配合<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)
    })
}

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

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

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

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

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

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

网站标题：download属性如何在HTML5中使用-创新互联
当前URL：https://www.cdcxhl.com/article4/dsddoe.html

成都网站建设公司_创新互联，为您提供服务器托管、企业建站、品牌网站建设、App开发、定制开发、网站排名

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联