文件下載重命名(可跨域)


參考https://www.jianshu.com/p/6545015017c4

1.不可跨域

<a :id="'download' + scope.$index" style="display:none"></a>
var a = $('#download'+e)[0];
                a.href=this.url+n.file_link;
                console.log(2222,a)
                a.download = n.file_name;
                a.click()
由於a.download跨域會失效,上面代碼只可同域實現

2.通用版
差不多就是獲取文件 Blob,然后下載重命名,簡單整理了一下:
/**
 * 獲取 blob
 * @param  {String} url 目標文件地址
 * @return {Promise} 
 */
function getBlob(url) {
    return new Promise(resolve => {
        const xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.response);
            }
        };

        xhr.send();
    });
}

/**
 * 保存
 * @param  {Blob} blob     
 * @param  {String} filename 想要保存的文件名稱
 */
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        const 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).then(blob => {
        saveAs(blob, filename);
    });
}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM