【SpreadJS V15.1 新特性介绍】表格编辑器组件支持 Vue3 框架

收藏

本帖最后由 Winny 于 2022-6-15 17:11 编辑

SpreadJS V14.2.0之后，组件运行时支持了Vue3，详细用法可参考Vue3中使用SpreadJS组件运行时。

SpreadJSV15.1.0中，对于在线表格编辑器，新增了Vue3的支持，本文会演示如何在Vue3工程中引入在线表格编辑器。
Step1: 可以选择以下任意方式创建一个Vue3工程，在这里，我用的是vite，当然你也可以选择使用vue-cli；

# npm 6.x
npm init vite@latest spreadjs-vue-ts --template vue-ts
# npm 7+, 需要额外的双横线：
npm init vite@latest spreadjs-vue-ts -- --template vue-ts
# yarn
yarn create vite spreadjs-vue-ts --template vue-ts
# pnpm
pnpm create vite my-vue-app -- --template vue

复制代码

Step2：安装相关资源

npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-cn
npm install @grapecity/spread-sheets-designer-vue
npm install @grapecity/spread-sheets
npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-tablesheet

复制代码

Step3: 组件注册
在main.js中对designer组件进行全局注册，当然你也可以使用局部组件注册方式，这里演示的是全局注册的方式。

import { createApp } from 'vue'
import App from './App.vue'
import Designer from "@grapecity/spread-sheets-designer-vue"
const app = createApp(App);
app.component("gc-spread-sheets-designer",Designer);
app.mount('#app')

复制代码

Step4: 创建vue文件，使用组件
在components文件夹下新建VueDesigner.vue，引入designer其它依赖资源，编写组件，详细代码如下所示：

<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"/>
</div>
</template>
<script setup lang="ts">
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GcDesigner from "@grapecity/spread-sheets-designer";
import {reactive, toRefs} from 'vue'
interface IData{
designer:GcDesigner.Spread.Sheets.Designer.Designer|null,
spread: GC.Spread.Sheets.Workbook|null
}
const data:IData = reactive({
designer:null,
spread: null
})
const refData = toRefs(data)
const styleInfo={height: '98vh'}
const spreadOptions={sheetCount:2}
const designerInitialized = (entity:GcDesigner.Spread.Sheets.Designer.Designer) => {
data.designer = entity
let spread:GC.Spread.Sheets.Workbook = data.designer.getWorkbook() as GC.Spread.Sheets.Workbook
let sheet = spread.getActiveSheet()
sheet.setValue(0,0,'Grapecity')
}
</script>

复制代码

**注意**这里使用Vue3提供的reactive方法对designer进行了封装，但是根据以往经验，这种封装后续会给数据添加一些额外的属性，种种操作会使ts验证报一些意向不到的错误。因此这里推荐还是使用直观的变量形式来定义designer。
step5：在app.vue中引入定义好的vue-designer组件，代码如下：

<template>
<vue-designer/>
</template>
<script setup lang="ts">
import VueDesigner from './components/VueDesigner.vue';
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>

复制代码

详细demo见文章末尾。

呆子 · 呆子

报错信息：

main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";
// import {
// GcSpreadSheets,
// GcWorksheet,
// GcColumn,
// } from "@grapecity/spread-sheets-vue";
import Designer from "@grapecity/spread-sheets-designer-vue";
// import "@/style/normalize.css";
import "virtual:windi.css";
const app = createApp(App);
app.component("gc-spread-sheets-designer", Designer);
// app.component("gc-spread-sheets", GcSpreadSheets);
// app.component("gc-worksheet", GcWorksheet);
// app.component("gc-column", GcColumn);
app.use(ElementPlus);
app.use(createPinia());
app.use(router);
app.mount("#app");

复制代码

// VueDesigner.vue

<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"
/>
</div>
</template>
<script setup>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GcDesigner from "@grapecity/spread-sheets-designer";
import { reactive, toRefs } from "vue";
const data = reactive({
designer: GcDesigner.Spread.Sheets.Designer.Designer | null,
spread: GC.Spread.Sheets.Workbook | null,
});
const refData = toRefs(data);
const styleInfo = { height: "98vh" };
const spreadOptions = { sheetCount: 2 };
const designerInitialized = (entity) => {
data.designer = entity || GcDesigner.Spread.Sheets.Designer.Designer;
let spread = data.designer.getWorkbook(); // GC.Spread.Sheets.Workbook
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Grapecity");
};
</script>

复制代码

package.json

"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"@grapecity/spread-excelio": "^15.1.1",
"@grapecity/spread-sheets": "^15.1.1",
"@grapecity/spread-sheets-barcode": "^15.1.1",
"@grapecity/spread-sheets-charts": "^15.1.1",
"@grapecity/spread-sheets-designer": "^15.1.1",
"@grapecity/spread-sheets-designer-resources-cn": "^15.1.1",
"@grapecity/spread-sheets-designer-vue": "^15.1.1",
"@grapecity/spread-sheets-languagepackages": "^15.1.1",
"@grapecity/spread-sheets-pdf": "^15.1.1",
"@grapecity/spread-sheets-pivot-addon": "^15.1.1",
"@grapecity/spread-sheets-print": "^15.1.1",
"@grapecity/spread-sheets-resources-zh": "^15.1.0",
"@grapecity/spread-sheets-shapes": "^15.1.1",
"@grapecity/spread-sheets-tablesheet": "^15.1.1",
"@grapecity/spread-sheets-vue": "^15.1.0",
"axios": "^0.27.2",
"element-plus": "^2.2.2",
"pinia": "^2.0.14",
"vue": "^3.2.36",
"vue-router": "^4.0.15"
},

复制代码

Winny · Winny

呆子发表于 2022-6-13 17:11
报错信息：

你在main.js里边把resources的资源加一下。

snowflakes7 · snowflakes7

本帖最后由 snowflakes7 于 2022-6-22 18:26 编辑

<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"
/>
</div>
</template>
<script setup lang="ts">
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GcDesigner from "@grapecity/spread-sheets-designer";
import { reactive, toRefs, onMounted, ref } from "vue";
// GC.Spread.Sheets.Designer.LicenseKey = "my key";
interface IData {
designer: GcDesigner.Spread.Sheets.Designer.Designer | null;
spread: GC.Spread.Sheets.Workbook | null;
}
const data: IData = reactive({
designer: null,
spread: null,
});
const refData = toRefs(data);
const styleInfo = { height: "98vh" };
const spreadOptions = { sheetCount: 2 };
const designerInitialized = (
entity: GcDesigner.Spread.Sheets.Designer.Designer
) => {
data.designer = entity;
let spread: GC.Spread.Sheets.Workbook =
data.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Grapecity");
};
const addBar = () => {
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert("Welcome to new designer.");
},
},
};
config.ribbon[0].buttonGroups.unshift({
label: "NewDesigner",
thumbnailClass: "welcome",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["Welcome"],
},
// This is custom button ----------------end-------------
],
},
});
};
addBar();
</script>

复制代码

使用该 demo 添加了自定义按钮；在未设置 LicenseKey是可以正常显示，在添加了LicenseKey之后，按钮不显示。这个要如何解决。
C:\Users\mujunhong\Desktop\未设置licenseKey.png
C:\Users\mujunhong\Desktop\设置licenseKey.png

Winny · Winny

snowflakes7 发表于 2022-6-22 18:22
使用该 demo 添加了自定义按钮；在未设置 LicenseKey是可以正常显示，在添加了LicenseKey之后，按钮不显 ...

无法复现问题，请提供相关demo到求助专区发帖~

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

【SpreadJS V15.1 新特性介绍】 表格编辑器组件支持 Vue3 框架

4 个回复

【SpreadJS V15.1 新特性介绍】表格编辑器组件支持 Vue3 框架