vue-json-excel导出xlsx

以下是使用vue-json-excel导出xlsx的步骤：

1.首先，安装vue-json-excel依赖包：

npm install vue-json-excel --save

2.在main.js中引入vue-json-excel并注册为全局组件：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JsonExcel from "vue-json-excel"; // 引入vue-json-excel
Vue.component("downloadExcel", JsonExcel); // 注册为全局组件
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')

3.在需要导出Excel的组件中，使用downloadExcel组件并传入数据和表头信息：

<template>
  <div>
    <download-excel
      :data="tableData"
      :columns="tableColumns"
      :filename="'excel文件名'"
      :sheetname="'sheet名称'"
      :title="'表格标题'"
      :autoWidth="true"
      :mergeCell="[]"
    >
      <el-button type="primary">导出Excel</el-button>
    </download-excel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ],
      tableColumns: [
        { label: '姓名', field: 'name' },
        { label: '年龄', field: 'age' },
        { label: '性别', field: 'gender' }
      ]
    }
  }
}
</script>

其中，data为需要导出的数据，columns为表头信息，filename为导出的Excel文件名，sheetname为sheet名称，title为表格标题，autoWidth为是否自动调整列宽，mergeCell为需要合并的单元格信息。