前端下載跨域文件,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回調方法，可以監聽當前下載進度，跟下載異常。