Vue3使用AntV s2创建表格并导出表格

1、AntV s2网址：https://s2.antv.vision/manual/introduction多维交叉分析表格https://s2.antv.vision/manual/introduction2、在vue3中下载模块

# React
yarn add @antv/s2 @antv/s2-react

# Vue3
yarn add @antv/s2 @antv/s2-vue

3、数件使用

// App.vue
<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { SheetComponent } from '@antv/s2-vue';
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
import "@antv/s2-vue/dist/style.min.css";

export default defineComponent({
  setup() {
    // dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
    const dataCfg = shallowRef(s2DataConfig);
    const options: S2Options = reactive(s2Options);

    return {
      dataCfg,
      options,
    };
  },

  components: {
    SheetComponent,
  },
});
</script>

<template>
  <SheetComponent :dataCfg="dataCfg" :options="options" />
</template>

4、项目中的应用

  <SheetComponent v-else ref="s2" :dataCfg="ReportStore.dataCfg" style="height:100%;" :options="ReportStore.options"
          adaptive loading />


//script
    ReportStore.dataCfg = {  //表格表头内容
      "fields": {
        "rows": [
          'date',
          'all'
        ],
        "columns": [
          'name1',
          'name3',
        ],
        'values': ['GasConsume']
      },
      "meta": [
        {
          "field": "date",
          "name": "时间"
        },
        {
          "field": "name1",
          "name": "站点"
        },
        {
          "field": "GasConsume",
          "name": "用气量（m³）"
        },
        {
          "field": "name3",
          "name": "流量计"
        },
        {
          "field": "all",
          "name": "总计（m³）"
        },
      ],
      'data': newArr,//[{GasConsume: '0.01', name1: 'Marker1', name3: '20220302001流量计1', date: '2023-09-07 08:00:00', all: 840.01}]
    }
     ReportStore.options = {        //表格配置
      height: 700,  //表格高度
      showDefaultHeaderActionIcon: false,//是否展示默认行列头操作图标
      style: {
        cellCfg: {
          width: 150,  //单元格宽度
          height: 40   //单元格高度
        },
        colCfg: {
          height: 45,  //表头高度
        },
      },
      tooltip: {
        showTooltip: false   //是否展示tooltip
      }
    };

表格效果图

5、导出为CSV，excel可打开

（1）在标签上添加ref

 <SheetComponent ref="s2" :dataCfg="ReportStore.dataCfg":options="ReportStore.options"
          adaptive />

 2、const s2 = shallowRef();

3、console.log('s2 instance:', s2.value?.instance);//s2.value?.instance即为实例

4、点击导出按钮，触发导出函数

//下载成Excel
function ExcelTable() {
  // 拿到复制数据
  // console.log(s2.value?.instance);//实例
  const data = copyData(s2.value?.instance, '\,', true)
  copyToClipboard(data)
    .then(() => {
      console.log('复制成功')
    })
    .catch(() => {
      console.log('复制失败')
    })
  download(data, '工业用户报表')//工业用户报表为下载的csv表格的表名
}