node js 版本 16.32+
参考文档：
Vue2+Univer实现可编辑Excel_vue univer-****博客
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>
启动
