在 HTML 中创建下载链接

在 html 中创建下载链接很简单；添加一个锚标记并指向“href”属性中的文件。但是，某些文件类型不会被下载；它们将在浏览器中打开。在这种情况下，请考虑使用“下载”属性。

如果您可以通过服务器端访问您的网站，则可以使用一些解决方法，例如配置 .htaccess，直接下载这些文件。如果您的网站托管在 wordpress.com、Blogspot 或 Github 页面等不允许您这样做的免费服务上，请考虑使用该 download 属性。

使用 html5 下载属性

该 download 属性是 HTML5 规范的一部分，将链接表示为下载链接而不是导航链接。

句法

 <a href="download/acme-doc.txt" download >下载文本</a>

该 download属性允许您在下载时有选择地重命名文件名。当文件驻留在服务器上时，特别是如果它是自动生成的，这对于在下载时为用户提供更合理名称的文件非常理想，例如：（不要 Acme Documentation (ver. 2.0.1).txt 忘记文件扩展名）。

以下是实践中的样子：

<a href= "download/acme-doc-2.0.1.txt" download= "Acme Documentation (ver. 2.0.1).txt" >下载文本</a>

在演示页面上试一试，您应该会找到以属性中指定的名称下载的文件 download 。

一些注意事项：

出于安全考虑， Firefox 只允许用户下载同源文件。该文件必须来自您自己的服务器或域名，否则将在浏览器中打开。
虽然 chrome 和最新的 Opera（使用 Chromium/Blink）允许下载跨源文件，但它们都将忽略属性值。换句话说，文件名将保持不变。

该属性也可以与不太常见的元素download一起使用。<area>

为 Internet Explorer 提供回退

该 download属性尚未在 Internet Explorer 中实现，但它受 Edge 支持。

为了使事情防弹我们可以添加一个不错的后备，例如在下载链接下方为不支持的浏览器提供额外的说明。为此，我们需要下载包含功能测试的Modernizrdownload 。

然后我们可以添加以下脚本。

1    if ( ! Modernizr.adownload ) {    
2    var $link = $('a');    
3    
4    $link.each(function() {    
5    var $download = $(this).attr('download');    
6    
7    if (typeof $download !== typeof undefined && $download !== false) {    
8          var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');    
9          $el.insertAfter($(this));    
10    }    
11    
12    });    
13    }

该脚本将测试浏览器是否支持该 download 属性；如果不是，它会附加一个新的 <div> 类以用于样式目的以及说明文本，并将其立即插入已提供该 download 属性的任何链接下方。