• 在我们实际开发中,经常要实现下载功能.
  • 配合属性
    • herf属性:定义下载地址
    • download属性:下载名称（注意点：download属性只能在同域名下有效！）
    • target属性:_self当前页面打开/_blank新建页面打开（注意点：target属性在设置了download属性之后,可能会失效）

同域名情况下（download有效）

• 好处:能在前端修改后端返回的文件名称
• 坏处:target属性失效了

动态创建a链接

<span class="downloadFile">点击下载文件</span>
<script>
    document.querySelector('.downloadFile').addEventListener('click', function () {
        let a = document.createElement('a');
        a.href='http://www.fio.org.cn/server/file/temporary/1585294334278.docx';
        a.download='海洋资料申请表及说明.txt';
        a.target='_blank';//这里就失效了,不明白为什么.
        a.click();
    }, false);
</script>

HTML结构中的a链接

<a href="http://www.fio.org.cn/server/file/temporary/1585294334278.docx" target="_blank" download="海洋资料申请表及说明.txt" >海洋资料申请表及说明.docx</a>

不同域名情况下（download失效）

• 这时候只能通过配置href的属性通知后端,让后端返回正确的文件名称了,前端不能控制了.
• 好处:target属性有效
• 坏处:后端处理,前端无法控制

<a href="http://www.fio.org.cn/core/control/common/down.jsp?filename=/upload/file/2020/04/03/213b5bae9764434f893522e9cdd1cc9d.doc&amp;title=附件1-报名表1111" target="_blank">附件1-报名表</a>

总结

总的来说：文件下载,后端命名为好,这样不会出现target失效的情况,如果不想麻烦后端,只能使用download属性,虽然在开发情况下,会出现download失效的情况,但是上了线之后就不会出现不同域名的状况了,只是会target会失效.(个人认为:无伤大雅)