链接文件转blob格式下载（浏览器）

留自省。
在项目中遇到下载的问题。
Desc： 原上传到阿里服务器后返回的Url，保存到自己数据库中后自家服务器再次返回以拼接好的完整Url供前端下载该文件.
本打算通过a链接的方式直接下载。 又因为它是浏览器可知文件不好去下载。 故而通过Url转Blob格式去执行下载功能.;

参考了网上得资料； 现记录

util.js

// 发送请求乃异步操作。 故而需要用callback继续调用
// 返回类型需要更改成“blob”格式
export function urlToBlob(the_url, fileName, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open("get", the_url, true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            callback && callback(this.response, fileName)
        }
    };
    xhr.send();
}

index.vue[methods]

// preview on off-line. download.
// element-ui event 'handlePreview'
handlePreview(file) {
    urlToBlob(file.url, file.name, this.downloadFile)
},

downloadFile(blobExample, fileName) {
    if(!blobExample) return
    // 创建一个Url...
    let url = window.URL.createObjectURL(blobExample)
    // let url = window.URL.createObjectURL(new Blob([data])) // blob failed.
    // 逻辑生成<a>执行点击,完成下载
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click();
    document.body.removeChild(link)
},

需注意的内容

# window.URL.createObjectURL.
# Blob.
# XMLHttpRequest.

有问题请留言。