安装

yarn add xlsx

json效果图

导出效果图

代码示例

<template>
  <!-- tablecommon -->
  <div class="commonBoxmp white-bg">
    <table
      class="tablecommon"
      :tableData="state.tableData"
      :searchBool="false"
      :column="state.column"
      @getCurrentColumns="getCurrentColumns"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pagination="state.page"
    >
       <template #tableLeft>
        <h3 class="mx15">
        </h3>

      </template>
      <template #tableColumn>
        <el-table-column
          v-for="(item, index) in state.columnData"
          class="animate__animated animate__fadeInUp"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
        </el-table-column>
      </template>
      <template #tableRight>
        <div>
          <el-button size="small" @click="handleChange" 
          type="primary">导出</el-button>
        </div>
      </template>
    </table>
  </div>
</template>

<script setup lang="ts">
import { forIn } from "@antv/x6/lib/util/object/object";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Xlsx from "xlsx";
import type { LltColumn } from "/@ts/views/sys/account/column";
const router = useRouter();
const route = useRoute();

//
onMounted(() => {});

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const count = ref(0);
const state: any = reactive({
  columnData: [
    {
      label:"名字",
    prop:"name",
    show:true
    },
     {
      label:"年龄",
    prop:"age",
    show:true
    },
     {
      label:"地址",
    prop:"address",
    show:true
    }
  ],
  tableData: [
    {
      name:"张三",
      age:21,
      address:"上海"
    },
        {
      name:"李四",
      age:22,
      address:"上海"
    },
  ],
  page:{
        currentPage: 1,
        total: 0,
        pageSize: 10,
        pageSizes: [10, 15, 20],
      }
});
const handleCurrentChange = (num: number) => {
  state.tableData = [];
};
//读区文件
const handleChange = () => {
		let data = []
      for (let index = 0; index < state.tableData.length; index++) {
        data.push({});
      }
      for (let j = 0; j < state.columnData.length; j++) {
        const element2 = state.columnData[j];
        for (let index = 0; index < state.tableData.length; index++) {
          const element = state.tableData[index];
          data[index][`${element2.label}`] = element[`${element2.prop}`];
        }
      }
     let ws =  Xlsx.utils.json_to_sheet(data);
	  let wb = Xlsx.utils.book_new();
	  Xlsx.utils.book_append_sheet(wb, ws);
	  Xlsx.writeFile(wb, "客户信息.xlsx");
};
const handleSizeChange = (size: number) => {};
const getCurrentColumns = (data: LltColumn[]) => {
  // console.log("data :>> ", data);
  state.columnData = data;
};
</script>

<style scoped lang="scss"></style>