利用vue-json-excel插件

首先进行安装

yarn add vue-json-excel    或者   npm i vue-json-excel --save

然后在mian.js文件中引入并注册为全局组件

import Vue from 'vue'
import App from './App.vue'
// 引入vue-json-excel
import JsonExcel from 'vue-json-excel'
// 注册JsonExcel为全局组件
Vue.component('downloadExcel', JsonExcel)

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
}).$mount('#app')

最后进行使用

<template>
  <div id="app">
    <download-excel
      class="export-excel-wrapper"
      :data="DetailsForm"
      :fields="json_fields"
      :header="title"
      name="用户信息.xls"
    >
      <!-- 上面可以自定义自己的样式 -->
      <el-button type="primary">导出</el-button>
    </download-excel>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      // excal标题
      title: '个人信息表格',
      // 里面的属性是excel表每一列的title,若不指定，默认导出全部数据中心全部字段
      json_fields: {
        用户名: 'name',
        性别: 'gender',
        年龄: 'age',
        住址: 'address',
        备注: 'remark',
      },
      // 需要导出的数据,要跟上面的字段对应
      DetailsForm: [
        {
          name: '张三',
          gender: '男',
          age: '24',
          address: '新世界',
          remark: 'onePiece!!!',
        },
      ],
    }
  },
}
</script>