文件导出，文件下载

src/utils/fileExport.js

import axios from "axios";
import { saveAs } from 'file-saver'
import { Message, Loading } from "element-ui";
const baseURL = process.env.VUE_APP_BASE_API;

let downloadLoadingInstance;

/**
 * 通过后台接口下载
 * @param {data} params object 入参
 * @param {url} url string 下载接口url
 * @param {method} method string 请求方法 可选
 */
export function fileExport(
  data,
  url,
  method = "POST"
) {
  if (!url) {
    Message.error('请传入下载地址')
    return;
  }
  downloadLoadingInstance = Loading.service({
    text: "正在下载数据，请稍候",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });

  const service = axios.create({
    baseURL
  });
  const requestConfig = {
    url,
    method,
    headers: { "Content-Type": "application/json" },
    responseType: "blob",
  }
  if (method == "GET") {
    requestConfig.params = data;
  } else {
    requestConfig.data = data;
  }
  return service
    .request(requestConfig)
    .then(async res => {
      console.log(res);
      let fileName = "";
      if (res.headers["content-disposition"]) {
        fileName = res.headers["content-disposition"].replace(
          /\w+;filename=(.*)/,
          "$1"
        );
      } else {
        fileName = res.data.fileName;
      }
      const isBlob = res.data.type !== "application/json";
      if (isBlob) {
        const blob = new Blob([res.data]);
        saveAs(blob, decodeURIComponent(fileName));
      } else {
        Message.error("下载文件出现错误");
      }
      downloadLoadingInstance.close();
    })
    .catch(r => {
      Message.error(r);
      downloadLoadingInstance.close();
    });
}

vue中使用

<el-button @click="handleExport">导出</el-button>
import { fileExport } from "@/utils/fileExport
methods:{
    handleExport(
        let src = `/rs/phone/export`;
        let params = { taskId: this.$route.query.taskId };
        fileExport(params, src,"GET");
    }
}