前端blob 下载视频

export const downloadCrossDomainFile = (url, filename, suffix, start, end, error) => {
    var xhr = new XMLHttpRequest;
    xhr.open('get', url);
    xhr.responseType = 'arraybuffer';
    xhr.onprogress = (event) => {
        // console.log(event);
        if (event.lengthComputable) {
            var loaded = parseInt(event.loaded / event.total * 100);
            start(loaded);
        }
    }
    xhr.onload = function() {
        var link = document.createElement('a');
        // arraybuffer转blob数据,当参数传入就行
        link.href = window.URL.createObjectURL(new Blob([xhr.response], { type: 'video/mp4' }));
        link.download = filename + suffix;
        link.click();
        link.remove();
        end()
    };

    xhr.onerror = () => {
        error(0)
    }
    xhr.send();
}

项目中后端返回的是二进制数据 arraybuffer 

ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。

表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。