jQuery --- 利用a標簽的download屬性下載文件！

最近遇到一個項目，需要有點擊下載文件的功能。

由於文件格式是多種的，對於 rar / zip / rtf / doc / xlsx / jpg等。 點擊下載有的是直接跳轉到后進行下載，但有的是打開進行預覽，例如：txt / img / pdf 這些文件的下載可以使用 a 標簽的download 屬性來進行下載：

參考：

http://www.w3school.com.cn/tags/att_a_download.asp
https://blog.csdn.net/cynl7/article/details/78785697

具體實現：

<foreach name="data.attachment" item="v">
<li class="o">
    <a style="color:#959595;" href="{$v.path}" download="{$v.name}" data-name="{$v.name}" class="fr">下載</a>
    <a style="color:#959595;" href="{$v.path}" download="{$v.name}" data-name="{$v.name}" class="fl ts300">{$v.name}</a>
</li>
</foreach> 

下面是用JS實現的：

<ul class="ziZhilist">
    <foreach name="data.attachment" item="v">
    <li class="o">
        <a href="javascript:;" style="color:#959595;" data-href="{$v.path}" data-name="{$v.name}" class="fr">下載</a>
        <a href="javascript:;" style="color:#959595;" data-href="{$v.path}" data-name="{$v.name}" class="fl ts300">{$v.name}</a>
    </li>
    </foreach> 
</ul>
<script type="text/javascript">
(function(){
var hostUrl = "http://"+"<?php echo $_SERVER['HTTP_HOST']; ?>";
$("ul.ziZhilist li").find("a").click(function(){
    var link = document.createElement('a');
    link.setAttribute("download",$(this).attr("data-name"));
    link.href = hostUrl+$(this).attr("data-href");
    link.click(); 
});
})();
</script>

這種方法還是比較簡單的。