前端实现Excel文档导出

html结构

使用elementUI写一个按钮

<el-button type="warning" size="mini" @click="exportExcel">模板下载el-button>

methods方法

通过调用 Blob 的构造函数来创建类型为 “application/vnd.ms-excel” 的 Blob 对象，然后通过动态创建 a 标签来实现文件的下载.

// 1. 定义导出excel方法
    // 参数1: 文件流对象; 参数2: 文件名称; 参数3: 文件后缀, 即文件格式
    //通过调用 Blob 的构造函数来创建类型为 “application/vnd.ms-excel” 的 Blob 对象，然后通过动态创建 a 标签来实现文件的下载.
    excelDownload(obj, name = Date.now(), suffix = 'xlsx') {//Date.now()获取当前日期
      const url = window.URL.createObjectURL(
        //Blob是二进制大对象
        new Blob([obj], { type: 'application/vnd.ms-excel' })
      )
      const aDOM = document.createElement('a')
      aDOM.style.display = 'none'//设置dom元素不显示，隐藏
      aDOM.href = url
      const fileName = name + '.' + suffix
      aDOM.setAttribute('download', fileName)//setAttribute(name, value)增加一个指定名称和值的新属性，或者把一个现有属性设定为指定的值
      document.body.appendChild(aDOM)//向body节点中添加dom节点
      aDOM.click()//在adom上模拟一次鼠标点击
      document.body.removeChild(aDOM)//移除节点
    },
      
    async exportExcel() {
      // 3. 先按下面方式修改 axios 配置，再调用接口获取文件流
      const res= await questionApi.uploadTemplate(data)
      // 4. 调用导出方法
      this.excelDownload(res, '题库模板' + Date.now())
    },

接口请求配置

1.定义get请求

const get = function (url, params) {
  const query = {
    baseURL: process.env.VUE_APP_URL,
    url: url,
    method: 'get',
    responseType: 'blob', //添加响应类型，必须项！
    withCredentials: true,
    timeout: 30000,
    params: params,
    headers: { 'request-ajax': true }
  }
  return request(false, query)
}

2.配置接口

uploadTemplate: () => get('/api/admin/question/template/'),//模板下载