做网站哪些好,网站模板怎么设计,四川省凉亭建设工程有限公司网站,纸做的花朵成品网站1、univerjs
Univer 提供了一个全面的企业级文档与数据协同的解决方案#xff0c;支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制#xff0c;开发者可以在 Univer 的基础上进行个性化功能的定制和扩展#xff0c;以适应不同用户在不同场景…1、univerjs
Univer 提供了一个全面的企业级文档与数据协同的解决方案支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制开发者可以在 Univer 的基础上进行个性化功能的定制和扩展以适应不同用户在不同场景下的特定需求。
2、开发配置
node版本
v16.20.2
package.json dependencies: {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,
}devDependencies: {univerjs/webpack-plugin: 0.4.3,}vue.config.js
const { UniverPlugin } require(univerjs/webpack-plugin)
module.exports {configureWebpack: {plugins: [new UniverPlugin(),]}
}3、vue代码
封装成组件UniverSheet.vue
templatediv refcontainerclassuniver-container/div
/templatescript
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
引用组件
templatediv style height: 100%;width: 100%;button clickgetData获取数据/buttonUniverSheet idsheetrefuniverRef:datadata //div
/templatescript
import UniverSheet from ./UniverSheet.vue
export default {components: {UniverSheet,},data() {return {data: {},}},methods: {getData() {const result this.$refs.univerRef?.getData()console.log(JSON.stringify(result, null, 2))},},
}
/scriptstyle langless scoped
/style效果图
