标签下载文件重命名失败，download 无效

最近用到<a>标签实现文件下载并对文件进行重新命名，遇到了一些问题，文件重命名一直失败，所幸最终还是解决了，在此记录一下，避免后来者踩坑。

HTML <a> 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接，其中href和download是我们下载文件所需要的两个属性。download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。简而言之，跨域会导致download属性无效。

比如：

<a download="课程附件.pdf " href="http://tmallapi.bluemoon.com.cn/课程.pdf">test</a>
这种情况下如果你的系统访问域名不是http://tmallapi.bluemoon.com.cn，download就无效，很不幸，我的访问域名就不是这个，因此一直重命名失败。特别的说一下，http与https也属于跨域。

download属性的使用存在很多的限制性，为了实现文件下载重命名，经过多方查询，找到了一种代替download的方法，亲测有效，具体方法如下：

1、a标签引入，其中url文件为静态文件地址，name为重命名名称，bookName为a标签显示内容

<a href="javascript:void(0)" onclick="courseDownload('url','name')>bookName</a>
2、js方法实现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

** * 下载 * @param {String} url 目标文件地址 * @param {String} filename 想要保存的文件名称 */ function courseDownload(url, filename) { getBlob(url, function(blob) { saveAs(blob, filename); }) } function getBlob(url,cb) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { cb(xhr.response); } }; xhr.send(); }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

/** * 保存 * @param {Blob} blob * @param {String} filename 想要保存的文件名称 */ function saveAs(blob, filename) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { var link = document.createElement('a'); var body = document.querySelector('body');   link.href = window.URL.createObjectURL(blob); link.download = filename;   // fix Firefox link.style.display = 'none'; body.appendChild(link);   link.click(); body.removeChild(link);   window.URL.revokeObjectURL(link.href); }

　　

————————————————
版权声明：本文为CSDN博主「xi_nuo」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xi_nuo/article/details/104795963