前端通过文件流导入导出excel（兼容IE）

1. api文件夹内新建config.js，封装导入导出的请求方法

import axios from 'axios'

...

/*
*  上传
*  url:请求地址
*  params:参数
* */
export function fileUpload(url, params = {},loading=true) {
  return new Promise((resolve, reject) => {
    service({
          url: url,
          method: 'post',
          data: params,
          headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
          resolve(response.data);
      }).catch(error => {
          reject(error);
      });
  });
}

/*
*  json格式请求文件流导出excel文件
*  url:请求地址
*  params:参数
* */
export function exportFile(url,params,loading=true){
  return new Promise((resolve, reject) => {
    service({
          url: url,
          method: 'post',
          data: params,
          headers: { 'Content-Type':'application/json;charset=UTF-8'},
          responseType: 'arraybuffer'
      }).then(response => {
          resolve(response);
      }).catch(error => {
          reject(error);
      });
  });
}

export default {
 ...
  fileUpload,
  exportFile
}

1. 添加接口函数，并在创建index.js引入

// 引入工具类
import http from './config'
...
export const systemManage = {
    ...
    // 用户导入导出excel的接口函数，添加接口地址
	userImport(data) {
		return http.fileUpload('sys/user/imp', data)
	},
	userExport(data) {
		return http.exportFile('sys/user/exp', data)
	},
}

3. 页面中使用

<template>
  <div>
    <!-- 导入 -->
    <el-upload
      accept=".xls, .xlsx"
      ref="upload"
      :multiple="false"
      :before-upload="beforeUpload"
      :show-file-list="false"
      action
      :limit="1"
      :http-request="uploadFile"
    >
      <el-button>导入用户</el-button>
    </el-upload>
    <!--导出-->
    <el-button @click="exportExcel()">导出用户</el-button>
  </div>
</template>
<script>
import { systemManage } from "@/api/index";
export default {
  data() {
    return {};
  },
  methods: {
    // 上传文件
    uploadFile(item) {
      let form = new FormData();
      // 文件对象
      form.append("excelFile ", item.file);
      // 发送请求
      systemManage
        .userImport(form)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("导入成功");
            this.searchFunc();
          } else {
            this.$message.error(res.message);
          }
          this.$refs.upload.clearFiles();
        })
        .catch((err) => {
          this.$refs.upload.clearFiles();
        });
    },
    //excel导出
    exportExcel(api) {
      let data = {
        // 传参
      };
      systemManage["userExport"](data)
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            var filename = decodeURI(res.headers["content-disposition"]).split(
              "="
            )[1];
            let contenttype =
              filename.substring(filename.lastIndexOf("."), filename.length) ===
              "xlsx"
                ? "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                : "application/vnd.ms-excel;charset=utf-8";

            var blob = new Blob([res.data], {
              type: contenttype,
            });
            if (window.navigator.msSaveOrOpenBlob) {
              // ie
              navigator.msSaveBlob(blob, filename);
            } else {
              var downloadElement = document.createElement("a");
              var href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = filename; //下载后文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); //点击下载
              document.body.removeChild(downloadElement); //下载完成移除元素
              window.URL.revokeObjectURL(href); //释放掉blob对象
            }
            this.$message.success("导出成功");
          } else {
            this.$message.error(res.message || "获取失败");
          }
        })
        .catch(() => {});
    },
  },
};
</script>

注：在响应头的Content-Disposition获取文件名和后缀，需要后端设置Access-Control-Expose-Headers: Content-Disposition