一、基础使用

为a标签新增一个download属性，来直接文件的下载；

• download为下载的文件名
• href为下载的url地址

<a href='http://192.168.1.1/abcd.xlsx' download='file.xlsx'>下载</a>

二、封装download方法

2.1、情况一

文件的url地址和当前访问网址同源

/**
 *
 * @param url 目标下载接口
 * @param fileName 文件名称
 * @returns {*}
 */

export function downBlobFile(url, fileName) {
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  window.setTimeout(function () {
    document.body.removeChild(link);
  }, 0);
}

这种写法有个前提：href 的下载地址 和 当前网站地址 必须是同源的，否则download不生效。

2.2、情况二

文件的url地址和当前访问网址不同源

/**
 *
 * @param url 目标下载接口
 * @param fileName 文件名称
 * @returns {*}
 */
export function downBlobFile(url, fileName) {
  const x = new window.XMLHttpRequest();
  x.open("GET", url, true);
  x.responseType = "blob";
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.target = "_blank";
    a.download = fileName;
    a.style.display = "none";
    document.body.append(a);
    a.click();
  };
  x.send();
}