Vue开发中实用的文件下载（仅包括视频下载和图片下载）

这个小功能本人也研究了一会，分享出来给大家，希望对大家有所帮助。

底层：利用a标签+Ajax请求进行文件的下载。

// 仅支持视频下载和图片下载
/**
 * 
 * @param {文件路径} url 
 * @param {文件名称} name 
 */
export function downLoad(url, name) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer'; // 返回类型blob
    xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let blob = this.response;
            console.log(blob);
            // 转换一个blob链接
            // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
            // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
            let downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
                type: 'video/mp4'
            }));
            // 视频的type是video/mp4，图片是image/jpeg
            // 01.创建a标签
            let a = document.createElement('a');
            // 02.给a标签的属性download设定名称
            a.download = name;
            // 03.设置下载的文件名
            a.href = downLoadUrl;
            // 04.对a标签做一个隐藏处理
            a.style.display = 'none';
            // 05.向文档中添加a标签
            document.body.appendChild(a);
            // 06.启动点击事件
            a.click();
            // 07.下载完毕删除此标签
            a.remove();
        };
    };
    xhr.send()
}