js实现在浏览器当前标签页下下载url或base64格式的文件

如果想下载一个在线链接的文件且在浏览器左下角或右上角弹出下载项：如下图这种

实现思路：

把url或base64格式转为blob格式，然后借助a标签实现下载

 1、url转blob/base64

function fileToBase64(urls) {
      return new Promise((resolve, reject) => {
          window.URL = window.URL || window.webkitURL;
          var xhr = new XMLHttpRequest();
          xhr.open("GET", urls, true);
          xhr.responseType = "blob";
          xhr.send();
          xhr.onload = function () {
              if (this.status == 200) {
              // 至关重要
                  let oFileReader = new FileReader();
                  // 到这里就实现了转blob
                  var blob = this.response;
                  // resolve(blob)
                  // ----------------------------------
                  // 下面代码为blob转base64
                  oFileReader.readAsDataURL(blob);
                  oFileReader.onloadend = function (e) {
                      var baseBuff = e.target.result;
                      resolve(baseBuff)
                  }
                  
              }
          }
      });
    }

2、base64转blob

/**
 * 
 * @param {base字符串含前缀} baseBuf 
 * @param mime
 */
 function base64toBlob(base64Buf, mime) {
    const arr = base64Buf.split(',');
    const typeItem = arr[0];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime || typeItem.match(/:(.*?);/)?.[1] });
}

3、a标签下载blob格式文件

/**
 * @param {*} data
 * @param {*} filename
 */
 function downloadByData(blob, filename) {
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    const blobURL = window.URL.createObjectURL(blob);
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobURL;
    tempLink.setAttribute('download', filename);
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobURL);
  }
}