標簽下載文件重命名失敗，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方法實現

**
* 下載
* @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();
}

　　

/**
* 保存
* @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