本文內容參考來源： https://cloud.tencent.com/developer/article/1431700

最近在工作中需要實現一個下載的功能，當時自認為很簡單，但是設定了download之後，發現重新命名沒有生效，因為下載沒有通過後臺協助，只根據一個地址去實現下載，最後查閱了資料，找到了解決辦法

/**
 * 獲取 blob
 * @param  {String} url 目標檔案地址
 * @return {cb} 
 */
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);
    };
}

/**
 * 下載
 * @param  {String} url 目標檔案地址
 * @param  {String} filename 想要儲存的檔名稱
 */
function download(url, filename) {
    getBlob(url, function(blob) {
        saveAs(blob, filename);
    });
};