关于标签a的download属性兼容性总结

本文章只讨论a标签download属性的相关内容。关于页面实现下载功能的方法，另外开篇探讨。

download为h5中新增的a标签属性。download+herf使a标签具备点击下载功能。但其兼容性有局限性。

1、首先实现download功能，先决条件必须满足：所要下载的文件与js或当前页面同源。即window.location.protocol（传输协议）+window.location.host（域名）必须有，且一致。

如果是本地文件，请启动本地服务，使用localhost访问页面。

例如：

2、用法

<a href="./imgs/cs.jpg" download="cs">点击下载</a>

download的值用来设置下载的文件名称。

3、兼容性测试及结果

代码

<a href="./imgs/cs.jpg">同源图片，不带download</a>
</br>
<a href="./imgs/cs.jpg" download="cs">同源图片，带download</a>
</br>
<a href="https://www.erke.com/images/erker_logo.gif">网络图片，不带download</a>
</br>
<a href="https://www.erke.com/images/erker_logo.gif" download="hxek">网络图片，带download</a>
</br>
<a href="./cs.zip" >本地zip文件，不带download</a>
</br>
<a href="JavaScript:;" onclick="down('./videos/cs.zip')">js放置a标签实现（html无法打开的文件格式）</a>
</br>
<a href="JavaScript:;" onclick="down('./imgs/cs.jpg')">js放置a标签实现（html可以打开的文件格式）</a>
</br>
<a href="JavaScript:;" onclick="down('https://codeload.github.com/LingerCareer/Just-learn-JS-this/zip/refs/heads/main')">js放置a标签实现（html不能打开的网络文件格式）</a>
</br>
<a href="JavaScript:;" onclick="down('https://www.erke.com/images/erker_logo.gif')">js放置a标签实现（html可以打开的网络文件格式）</a>

<script>
    function down(url){
        var a =document.createElement('a');
        a.href=url;
        document.body.appendChild(a);
        a.style.display ='none';
        a.download ='';
        a.click();
    }
</script>

pc端浏览器兼容性

4、总结

html不支持的文件，无论同源还是不同源，有没有download属性，都会下载。
html支持的文件，同源且有download属性，除ie外都会下载。
html支持的文件，不同源，无论有无download属性，都不会下载，浏览器会直接跳转打开。

原文链接：https://blog.csdn.net/u012881483/article/details/120042474