实现excel 表格导出

方法一：后端配合，通过调接口导出

公共方法，在'@/util/util.js'文件中的代码如下：

export function flowDownload(response) {
  // 流文件下载
  var contentDisposition = response.headers['content-disposition']
  const csvData = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var result = patt.exec(contentDisposition)
  var file_name = decodeURIComponent(result[1])
  if (!!window.ActiveXObject || 'ActiveXObject' in window) { // for IE
    window.navigator.msSaveOrOpenBlob(csvData, file_name)
  } else {
    var a = document.createElement('a')
    var url = window.URL.createObjectURL(csvData)
    a.href = url
    a.download = file_name
    a.click()
    a.remove()
    window.URL.revokeObjectURL(url)
  }
}

在'@/api/wfzd/setBank.js' 文件中接口请求代码如下：

import request from '@/router/axios'

// 导出入驻银行清单表
export function exportChangerloan(obj) {
  return request({
    url: '/businessReportExcel/exportChangerloanDetails',
    //记得修改接口地址
    method: 'post',
    responseType: 'blob',
    data: obj
  })
}

在setBank.vue 文件中的代码如下

<div class="btnAll">
   <el-button type="primary" size="medium" @click="ExportFile">导出</el-button>
</div>


<script>
import {  exportChangerloan } from '@/api/wfzd/setBank.js'
import { flowDownload } from '@/util/util.js'

export default {
  name: 'SetBank',
  data() {
    return { 
      dataForm: {
        // 页数
        page: {
          current: 1,
          size: 10
        },
        //  表单内容
        query: {
          bankname: '', //  银行名称
          startTime: '', // 开始时间1
          endTime: '', // 结束时间2
          status: '', // 状态
          userId: ''
        }
      },
    }
  },

  methods: {
    // 导出
    ExportFile() {
      exportChangerloan(this.dataForm).then((res) => {
        flowDownload(res)
      })
    },
  }

}
</script>

方法二：纯前端实现

1、安装第三方包 npm  install vue-json-excel --save

2、在main.js中引入

// 全局引入或者局部引入都可以，下面例子为全局引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel',JsonExcel)

3、在.vue文件中使用

<template>
  <div>
    <!-- data:表格数据  fields：表头 name：表格名称 -->
    <download-excel :data="dataList" :fields="json_fields" worksheet="My Worksheet" name="表格名称">导出明细列表</download-excel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      json_fields: {
        //导出Excel表格的表头设置
        姓名: 'name',
        年龄: 'age',
        性别: 'sex'
      },
      dataList: [
        {
          name: '张三',
          age: '18',
          sex: '男'
        },
        {
          name: '张三',
          age: '18',
          sex: '男'
        },
        {
          name: '张三',
          age: '18',
          sex: '男'
        }
      ]
    }
  }
}
</script>