a标签下载文件

1、创建a标签

var aLink = document.createElement("a");

2、设置a标签为隐藏

aLink.style.display = "none";

3、添加要导出的url

aLink.href = url;

4、给a标签添加download的属性， 属性值为文件名

aLink.setAttribute("download", fileName);

5、在页面里添加a标签

document.body.appendChild(aLink);

6、调用a标签click方法

aLink.click();

7、下载完成移除元素

document.body.removeChild(aLink);

配合后端导出表格使用

1、添加responseType: "blob"， 否则导出的表格会乱码

axios.post(接口, 参数, {
      responseType: "blob"
    })

2、在响应参数中解析出文件名

function resolveHeaderFileName(res) {
  if (!res.headers["content-disposition"]) {
    return "";
  }
  let fileName = decodeURI(
    res.headers["content-disposition"].split(";")[1]
  ).replace("filename=", "");
  return fileName;
}

3、导出表格

function exportReport(data, fileName) {
    var blob = new Blob([data], {
      type: "application/vnd.ms-excel;charset=utf-8"
    });
    var url = window.URL.createObjectURL(blob);
    var aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = url;
    aLink.setAttribute("download", fileName);
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink); //下载完成移除元素
    window.URL.revokeObjectURL(url); //释放掉blob对象
}