Vue2+Univer 环境搭建

node js 版本 16.32+

参考文档：

Vue2+Univer实现可编辑Excel_vue univer-CSDN博客

https://univer.ai/guides/sheet/getting-started/quickstart

实现步骤：

1、包里面直接写这些

"@riophae/vue-treeselect": "0.4.0",
    "@univerjs/core": "0.2.4",
    "@univerjs/design": "0.2.4",
    "@univerjs/docs": "0.2.4",
    "@univerjs/docs-ui": "0.2.4",
    "@univerjs/engine-formula": "0.2.4",
    "@univerjs/engine-render": "0.2.4",
    "@univerjs/facade": "^0.2.4",
    "@univerjs/network": "0.2.4",
    "@univerjs/rpc": "0.2.4",
    "@univerjs/sheets": "0.2.4",
    "@univerjs/sheets-formula": "0.2.4",
    "@univerjs/sheets-numfmt": "0.2.4",
    "@univerjs/sheets-ui": "0.2.4",
    "@univerjs/ui": "0.2.4",

这个的数据来源官网的这里，拷贝过来

StackBlitz

package里面的这个依赖也是

  "devDependencies": {
    "@univerjs/webpack-plugin": "0.4.3",

然后vue.config里面加个：new UniverPlugin()

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
        cache: false,                                  // 不启用文件缓存
        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,  // 压缩文件格式
        filename: '[path][base].gz[query]',            // 压缩后的文件名
        algorithm: 'gzip',                             // 使用gzip压缩
        minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
        deleteOriginalAssets: false                    // 压缩后删除原文件
      }),new UniverPlugin()
    ],
  },

新建一个universheet页面

<template>
  <div ref="container"
       class="univer-container"></div>
</template>

<script>
import { Univer, UniverInstanceType, LocaleType } from '@univerjs/core'
import { defaultTheme } from '@univerjs/design'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import { UniverUIPlugin } from '@univerjs/ui'
import { FUniver  } from '@univerjs/facade'
import { zhCN, enUS } from 'univer:locales'
import '@univerjs/sheets-ui/lib/index.css'
export default {
  name: 'UniverSheet',
  props: {
    data: {
      value: Object,
      default: () => ({})
    }
  },
  watch: {
    data: {
      handler(val) {
        this.destroyUniver()
        this.init(val)
      },
      immediate: true
    }
  },
  data() {
    return {
      univer: null,
      workbook: null,
      univerAPI: null
    }
  },
  mounted() {
    this.init(this.data)
  },
  methods: {
    init(data = {}) {
      const univer = new Univer({
        theme: defaultTheme,
        locale: LocaleType.ZH_CN,
        locales: {
          [LocaleType.ZH_CN]: zhCN,
          [LocaleType.EN_US]: enUS
        }
      })
      this.univer = univer
      univer.registerPlugin(UniverRenderEnginePlugin)
      univer.registerPlugin(UniverFormulaEnginePlugin)
      univer.registerPlugin(UniverUIPlugin, {
        container: this.$refs.container
      })

      univer.registerPlugin(UniverDocsPlugin, {
        hasScroll: false
      })
      univer.registerPlugin(UniverDocsUIPlugin)
      univer.registerPlugin(UniverSheetsPlugin)
      univer.registerPlugin(UniverSheetsUIPlugin)
      univer.registerPlugin(UniverSheetsFormulaPlugin)

      this.workbook = univer.createUnit(UniverInstanceType.UNIVER_SHEET, data)

      this.univerAPI = FUniver.newAPI(univer)
    },
    destroyUniver() {
      this.univer?.dispose()
      this.univer = null
      this.workbook = null
    },
    getData() {
      if (!this.workbook) {
        throw new Error('未初始化')
      }
      return this.workbook.save()
    }
  }
}
</script>
<style scoped>
.univer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
:global(.univer-menubar) {
  display: none;
}
</style>

然后再来个页面引用他

<template>
   <div style="height: 800px;width: 100%;">
   <button @click="getData">获取数据</button>
   <UniverSheet id="sheet"
                ref="univerRef"
                :data="data" />
 </div>
</template>

<script>

import UniverSheet from './UniverSheet.vue'
export default {
  name: "Index",
  components:{UniverSheet},
  data(){
    return{
      select:[],
      data: {},
      loginUser: ''
    }
  },
  mounted(){

  },
  methods:{
    getData() {
      const result = this.$refs.univerRef?.getData()
      console.log(JSON.stringify(result, null, 2))
    },

  }
}
</script>

<style lang="less" scoped>


}
</style>

启动