vue中渲染excel数据

<template>
  <div>
    <a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
      <template #extra>
        <a-button @click="() => this.$router.back()">返回</a-button>
        <a-button v-if="!state.err" type="primary" @click="downfile({url: state.fileUrl,name: state.fileName})">保存</a-button>
      </template>
    </a-page-header>
    <a-card :bordered="false" :style="{ background: '#fff', minHeight: '280px' }">
      <div id="luckysheet" :style="{ margin: '0px',padding:'0px',width:'100%',height: totalHeight+'px' }"/>
    </a-card>
  </div>
</template>
<script>
import LuckyExcel from 'luckyexcel';
import {defineComponent, nextTick} from "vue";
import {reactive} from "vue";
 
export default defineComponent({
  created() {
    const fileUrl= this.$route.query.url ? this.$route.query.url : null
    const fileName= this.$route.query.name ? this.$route.query.name : null
    this.state.fileUrl = fileUrl
    this.state.fileName = fileName
    if (fileUrl == null) {
      alert("error")
    } else {
      // 加载文件内容
      this.openExcel({url:fileUrl,name:fileName})
    }
 
  },
  setup() {
    const state = reactive({
      fileUrl: '',
      fileName: ''
    });
    const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    const openExcel = ({url:url,name:name}) => {
      nextTick(() => {
        LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => {
          if (exportJson.sheets == null || exportJson.sheets.length === 0) {
            alert("Fail to read the content of the excel file")
            return;
          }
          // /public/statis/luckysheet文件夹下 是被修改的luckysheet源码
          // loadUrl、loadSheetUrl不再使用post接口请求，而是直接传递现成数据加载（数据格式与原post返回格式一致）
          // 构建loadUrl: firstData(包括所有sheet表的格式，和第一个sheet的数据)
          // loadSheetUrl:secondData (包括除第一个sheet表的其他所有表的数据)
 
          const firstData = [];
          const secondData = {};
          for (let i = 0; i < exportJson.sheets.length; i++) {
            firstData[i] = {
              name: exportJson.sheets[i].name,
              index: exportJson.sheets[i].index,
              order: exportJson.sheets[i].order,
              status: exportJson.sheets[i].status,
              config: exportJson.sheets[i].config
            }
            firstData[i].config.row = 10
            parseInt(exportJson.sheets[i].status) === 1 ? firstData[i].celldata = exportJson.sheets[i].celldata : 0 == 0
            secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata
          }
 
          console.log('exportJson',exportJson)
 
          // luckysheet生成网页excel
          window.luckysheet.destroy()
          window.luckysheet.create({
            container: 'luckysheet', // 设定DOM容器的id
            showtoolbar: false, // 是否显示工具栏
            showinfobar: false, // 是否显示顶部信息栏
            showsheetbarConfig: {
              add: false, //新增sheet
              menu: true, //sheet管理菜单
              sheet: true //sheet页显示
            },
            sheetRightClickConfig: {
              delete: false, // 删除
              copy: false, // 复制
              rename: false, //重命名
              color: false, //更改颜色
              hide: false, //隐藏，取消隐藏
              move: false, //向左移，向右移
            },
            showstatisticBar: false, // 是否显示底部计数栏
            sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, //返回头部按钮
            // data: [exportJson.sheets[0]], //表格内容
            gridKey: url,
            loadUrl: JSON.stringify(firstData), //首先加载的数据，被修改后需要String类型
            loadSheetUrl: JSON.stringify(secondData), //随后加载的数据，被修改后需要String类型
            title: exportJson.info.name, //表格标题
          });
        })
      })
    };
    return {
      totalHeight,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      state,
      openExcel
    }
  }
})
 
</script>