HTML5中的强制download属性下载使用实例

2019-09-08 郑州网站建设  

HTML5 的 Download 属性用来强制浏览器download对应文件,而不是打开。Chrome 和 Firefox 等浏览器太过于强大,也许是为了增强用户体验,当用户点击的资源文件可以被它们识别的时候(例如 pdf 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接download而不是在浏览器上看看,这时就可以加上这个属性,属性值会对download的文件重命名:
<a href=http://www.divcss5.com/html5/"下载pdf.php" 下载="下载.pdf">点击直接download并保存成 下载.pdf 文件</a>
如果你确定这个资源是用户肯定会download的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。
在html里创建一个是download链接是方便的,添加一个<a>标签和指向文件的href属性就行了。但是某些文件不会被download(比如图像,pdf,txt,doc),相反,他们会在浏览器中被打开。
如果你的站点是有服务器端的,你可以通过配置.htaccess文件来使得那些文件可以被download。如果你的站点是被WordPress.com或者github页面托管的(静态页面),那么轻考虑使用<a>标签的下载属性

使用“Download”属性
下载属性是html5规范的一部分,它表现为一个download链接,而不是一个导航的链接。
下载属性也允许你去重命名一个需要download的文件。比如,一个文件存放在服务器上,如果这个文件是自动生成的,一般来说它被都命名为一个系统的数字和破折号的组合,例如acme-doc-2.0.1.txt,我们可以重命名这个download文件的名字,用户download后看到的文件名可以是一个比较好的名字,例如Acme Documentation (ver. 2.0.1).txt,像这样增加用户体验(不要忘记文件的拓展名)。

XML/HTML Code复制内容到剪贴板

<a href="下载pdf.php" 下载="下载.pdf">点击直接download并保存成 下载.pdf 文件</a>  

2016512105929566.jpg (600×151)

可以看一下这个demo地址:

一些注意:
Firefox考虑到安全问题,该download文件必须是从自己的服务器或域名中的,否则将在浏览器中打开。
在Chrome和Opear中,如果说download文件不是在子集的服务器或域名中,这些浏览器会忽视下载属性,换句话来说,文件名不变。

提供后备方法:
在写本文的时候,下载属性并没有在Safari和IE中实现,但是IE声称,下载属性的实现已经在开发日程顶部了。

2016512105956946.jpg (600×340)

在这期间,我们可以使用一个后备方法去兼容那些浏览器。我们需要去downloadModernizr的下载属性特征测试。

2016512110024606.jpg (600×380)

然后添加以下脚本:

JavaScript Code复制内容到剪贴板

if ( ! Modernizr.a下载 ) {   

    var $link = $('a');   

    $link.each(function() {   

        var $下载 = $(this).attr('下载');   

        if (typeof $下载 !== typeof undefined && $下载 !== false) {   

      var $el = $('<div>').addClass('下载-instruction').text('Right-click and select "Download Linked File"');   

      $el.insertAfter($(this));   

        }   

    });   

}  

这个脚本是去测试浏览器是否支持下载属性的,如果浏览器不支持的话,它就会想有下载属性的<a>标签下面,插入一个有下载-instruction类的<div>标签,并给予文字指引使用右键download。

2016512110040425.jpg (600×380)


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1360.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • е
  • download