element upload的导出和下载xsl文件

封装到工具类 utils 目录下

import axios from 'axios'
import { getToken } from "@/xxx";  // 接口请求头携带的token
import ElementUI from 'element-ui';

export function getOutExcel(url, data, method = "post") {
  axios({
    headers: {
      Authorization: getToken(), // 保存请求的token
      "Content-type": "application/json; charset=utf-8",
    },
    method: method || 'post',
    baseURL: process.env.VUE_APP_BASE_API, // baseURL
    url: url, // api地址
    data: method === 'post' ? data : null,
    params: method === 'get' ? data : null,
    responseType: "blob", // 表明返回服务器返回的数据类型
  }).then((res) => {
    // 处理返回的文件流
    const content = res.data;
    const blob = new Blob([content]);
    const fileName = `模板.xls`;
    if ("download" in document.createElement("a")) {
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  }).catch(err => {
    ElementUI.Message({
      message: '导出失败',
      type: 'error'
    });
  });
}

调用

<template>
	<div>
		<span @click="downLoad">下载模板</span>
	</div>
</template>

import { getOutExcel} from "@/utils/xxx"

// 导出 下载功能
methods:{
	downLoad(){
		getOutExcel('第一个参数写接口的地址','接口需要的参数','请求类型 默认post')
	}
}