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 = univeruniver.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 = nullthis.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>

启动