前端下载跨域文件,mp4处理，加下载进度

通常同源的情况下，下载文件可以直接使用a标签的download属性，href直接指向

文件的路径，

但跨域的时候，浏览器不会自动下载，而是打开文件。

以下是解决方案：

　　　　

/*
 *下载跨域文件
 *url 文件的路径
 * filename 文件名
 *Suffix 下载之后的后缀，
 * cb 监听下载进度的callback
 **/
export const downloadCrossDomainFile = (url, filename, suffix, cb) => {
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      var loaded = parseInt(event.loaded / event.total * 100);
      cb(loaded);
    }
  }
  xhr.onload = function () {
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(new Blob([xhr.response]));
    link.download = filename + suffix;
    link.click();
    link.remove();
  };
  xhr.onerror = () => {
    cb(0)
  }
  xhr.send();
}
原理就是发送get请求文件，responseType指定为 arraybuffer，二进制格式
onload的时候 ，表示已经接收完成，
创建blob对象，利用浏览器自带API,createObjectURL,创建一个url指向二进制文件所在的内存空间。

　在使用a标签下载即可。

　xhr有onprogress 跟onerror回调方法，可以监听当前下载进度，跟下载异常。