HTML5下载属性指南

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

下载属性允许我们将媒体文件强制下载到用户的计算机或移动设备上。例子:

< a href = " htmldoc.html "下载下载HTML文档> < / >

通常,当我们链接到HTML文档、PDF、图像文件或其他媒体文件时,当用户单击其链接时,它们将在浏览器中打开。但是如果超链接有下载属性,例如在上面的例子中,浏览器会被指示下载该文件,其行为很像指向.zip或.exe文件的链接。

下载属性弹出示例

下载属性将在Firefox中打开一个“保存”对话框,让用户可以选择将文件保存到自己的电脑或移动设备上

下载属性对于pdf、图像文件、视频和音频剪辑以及其他您希望用户保存在计算机或移动设备上的媒体内容非常有用。

修改文件名

方法可以更改实际的文件名下载属性值。例子:

< a href = " tform5201.pdf "下载= " visa-application.pdf ">

在上面的示例中,当用户单击超链接时,名为“tform5201.pdf”的PDF文件在下载时被更改为更易读、更友好的文件名“visa-application.pdf”。

下载属性的演示

下面是一个演示页面,可以帮助您探索和测试下载属性在超链接上的行为:HTML5下载属性演示页面截图视图演示从GitHub下载源代码

属性特征检测

因为很多浏览器还没有实现下载属性,使用JavaScript检查用户的浏览器是否有它是一个聪明的主意:

//创建临时超链接元素var hyperlink = document.createElement("a");//如果下载属性未定义//浏览器不支持该特性如果(超链接。下载=== undefined) {/ /做东西

在演示页面中,如果下载属性不存在时,将显示一个模式窗口,并显示一条消息告诉用户不支持该特性。Safari目前不支持下载属性示例

Safari目前不支持下载属性,因此会显示一个模式窗口来通知用户

实现状态

在撰写本文时,以下web浏览器的最新版本实现了下载属性:

  • Firefox / Firefox为Android
  • Chrome /铬为Android
  • / Opera移动
  • Android浏览器
  • 黑莓浏览器

看看这个下载属性支持表在caniuse.com上查看其当前的浏览器实现状态。此外,请查看W3C的下载属性规范在GitHub上查看Repo

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!