SpreadJS V14.2.0之后在VUE3中集成

收藏 · 2021-11-24 14:36 上传

本帖最后由 Winny 于 2022-6-7 17:10 编辑

SpreadJS在V14.2.0之前是无法使用标签的形式在Vue3中使用的，如果需要使用只能在<template>内部增加容器<div id="yourId">，在组件挂在之后去new GC.Spread.Sheets.Workbook(document.getElementById('yourId'))。

在SpreadJSV14.2.0之后，可以支持在VUE3中使用标签的形式引入SpreadJS，但目前designer仍然不支持在VUE3中以标签形式使用，如果要在VUE3中使用designer，还是需要在<template>中添加<div id="yourId">，组件挂载之后执行new GC.Spread.Sheets.Designer.Designer(document.getElementById('yourId'))

本文会详细介绍如何在VUE3中以标签的形式引入SpreadJS。

1. 创建VUE3工程

npm install -g @vue/cli
vue create spreadjs-quickstart :: Here, select Vue 3.
cd spreadjs-quickstart
npm run serve

复制代码

2. 安装引用资源

npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets

复制代码

3. 在项目入口js中引入资源并注册资源

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'
let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount("#app");

复制代码

4. 修改App.vue

<template>
<div id="spread-host">
<gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initSpread">
<gc-worksheet>
<gc-column> </gc-column>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
export default {
name: "app",
components: {},
data() {
return {};
},
methods: {
initSpread: function (spread) {
this.spread = spread;
let sheet = this.spread.getActiveSheet();
sheet
.getCell(0, 0)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.value("SpreadJS");
},
},
};
</script>
<style>
.spreadHost {
width: 800px;
height: 800px;
}
</style>

复制代码

5. 启动项目
根据package.json中的配置信息，执行启动命令，启动项目即可。
测试示例见文章末尾。
15.1.0之后，在线表格编辑器可以支持Vue3了，使用方法参考：组件版编辑器支持Vue3

		自动登录	找回密码
密码			立即注册

SpreadJS V14.2.0之后在VUE3中集成

0 个回复