SpreadJS V14.2.0之后在VUE3中集成

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工程

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

复制代码

2. 安装引用资源

1. npm install @grapecity/spread-sheets-vue
   
2. npm install @grapecity/spread-sheets               

复制代码

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

1. import { createApp } from 'vue'
   
2. import App from './App.vue'
   
3. import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'
   
4. 
   
5. let app = createApp(App);
   
6. app.component('gc-spread-sheets', GcSpreadSheets);
   
7. app.component('gc-worksheet', GcWorksheet);
   
8. app.component('gc-column', GcColumn);
   
9. app.mount("#app");                           

复制代码

4. 修改App.vue

1. 
   
2. <template>
   
3.   <div id="spread-host">
   
4.     <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initSpread">
   
5.       <gc-worksheet>
   
6.         <gc-column> </gc-column>
   
7.       </gc-worksheet>
   
8.     </gc-spread-sheets>
   
9.   </div>
   
10. </template>
    
11. 
    
12. <script>
    
13.   import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    
14.   import * as GC from "@grapecity/spread-sheets";
    
15. 
    
16.   export default {
    
17.     name: "app",
    
18.     components: {},
    
19.     data() {
    
20.       return {};
    
21.     },
    
22.     methods: {
    
23.       initSpread: function (spread) {
    
24.         this.spread = spread;
    
25.         let sheet = this.spread.getActiveSheet();
    
26.         sheet
    
27.           .getCell(0, 0)
    
28.           .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    
29.           .value("SpreadJS");
    
30.       },
    
31.     },
    
32.   };
    
33. </script>
    
34. 
    
35. <style>
    
36.   .spreadHost {
    
37.     width: 800px;
    
38.     height: 800px;
    
39.   }
    
40. </style>
    
41. 
    
42.                                     

复制代码

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