vue导出文件

项目上经常会遇到导出的需求，接口返回文件流，前端拿到文件并保存到本地

import axios from 'axios';

// 下载文件
const downloadFile = (res, fileName) => {
  if (!res) {
    return;
  }
  if (window.navigator.msSaveBlob) {
    // IE以及IE内核的浏览器
    try {
      window.navigator.msSaveBlob(res, fileName); // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
    } catch (e) {
      console.log(e);
    }
  } else {
    const url = window.URL.createObjectURL(new Blob([res]));
    downloadFileByUrl(url, fileName);
    window.URL.revokeObjectURL(url); // 释放掉blob对象
  }
};

// url文件下载
const downloadFileByUrl = (url, fileName) => {
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', fileName); // 文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); // 下载完成移除元素
};

// 导出
const handleExportData = async () => {
  try {
    const res = await axios.post('/api/download', {}, {
      responseType: 'blob',
    });
    if (res.headers['content-disposition']) {
      const filename = decodeURIComponent(
        res.headers['content-disposition'].split(";")[1].split('=')[1]
      );
      downloadFile(res.data, filename);
    } else {
      console.log('导出失败')
    }
  } catch (error) {
    console.log(error)
  }
};