将通过url下载的乱码文件名 重命名

需求是：下载的excel 文件名乱码，需要将乱码的文件名重命名 我们是走oss。

本文参考

方法1

此方法要求同源，不能跨域，跨域download 会失效

href和download是我们下载文件所需要的两个属性。download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。

export function handleFileName(url ,fileName){
    const link = document.createElement('a');
    link.style.display = 'none';
    // 设置下载地址
    link.setAttribute('href', url);
    // 设置文件名
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

方法2

先转换为blob 再通过a标签，此方法同样跨域，需要后端将的到的url 设置为允许跨域，在oss上设置 允许跨域即可

// @param  {String} url 目标文件地址
  // @param  {String} filename 想要保存的文件名称
  export function courseDownload(url, filename) {
    getBlob(url, function(blob) {
      saveAs(blob, filename);
    })
  }
  function getBlob(url,cb) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    // xhr.setRequestHeader('withCredentials',true)
    // xhr.setRequestHeader('Access-Control-Allow-Origin',"*")
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        cb(xhr.response);
      }
    }
    xhr.send();
  }
  // 保存
  // @param  {Blob} blob
  // @param  {String} filename 想要保存的文件名称
  function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, filename);
    } else {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
      window.URL.revokeObjectURL(link.href);
    }
  }