純js實現文件下載並重命名功能

純js實現文件下載並重命名功能

來源: http://www.javashuo.com/article/p-mwuymggo-hx.html

/** * 獲取 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);
    });
};

download('https://www.baidu.com/img/baidu_resultlogo@2.png', 'ab.png')

​