原生JS下载

window.open & location.href

window.open('下载地址或后端接口')
location.href = '下载地址或后端接口'

a 标签实现下载

tip：要确定后端给的是什么格式的文件，是否是二进制文件流文件

可用链接直接下载

//拿到的图片为图片文件，如：base64编码后的图片
function downFile() {
  const el = document.createElement('a');
  el.href = '下载地址或后端接口';
  el.setAttribute('download', '可选，下载文件的名字');
  document.body.appendChild(el);
  el.click();
  document.body.removeChild(el);
}

二进制文件流下载

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

var aBlob = new Blob( array, options );

//如果是二进制流文件，需要加请求头类型
function downFile() {
  const { data } = await axios({
    method: "POST",
    url: `${APIS.permission.import}`,
    data: form,
    responseType: "blob",
  });
  const blob = URL.createObjectURL(new Blob([data]));
  const el = document.createElement("a");
  el.setAttribute("download", "配置导入模板下载.xlsx");
  el.href = blob;
  document.body.appendChild(el);
  el.click();
  document.body.removeChild(el);
} 

iframe下载

function download(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  function iframeLoad() {
    console.log('iframe onload');
    const win = iframe.contentWindow;
    const doc = win.document;
    if (win.location.href === url) {
      if (doc.body.childNodes.length > 0) {
        // response is error
      }
      iframe.parentNode.removeChild(iframe);
    }
  }
  if ('onload' in iframe) {
    iframe.onload = iframeLoad;
  } else if (iframe.attachEvent) {
    iframe.attachEvent('onload', iframeLoad);
  } else {
    iframe.onreadystatechange = function onreadystatechange() {
      if (iframe.readyState === 'complete') {
        iframeLoad;
      }
    };
  }
  iframe.src = '';
  document.body.appendChild(iframe);

  setTimeout(function loadUrl() {
    iframe.contentWindow.location.href = url;
  }, 50);
}