在VUE 3中使用SpreadJS（一）

收藏

本帖最后由 dexteryao 于 2021-11-12 12:15 编辑

SpreadJS V14.2 已正式支持Vue3，去体验新版本吧

最近VUE 3的热度持续走高，已经有人询问SpriedJS是否支持VUE 3了。SpreadJS作为一款原生JavaScript控件，并且符合UMD规范，所以任何框架和场景下都可以使用。目前SpreadJS针对VUE 2提供了组件封装，在VUE3正式发布前，我们先自己实现一个封装SpreadJS的组件。
关于在VUE 3中使用SpreadJS，将通过两篇文章说明，首先完成第一步创建VUE 3项目和SpreadJS组件，下一篇讲介绍通过Composition API的方式使用SpreadJS功能。

直接开始创建项目

一．使用vite创建VUE 3项目
vite是专门针对于开发VUE 3项目的开发工具，关于vite的更多信息可以参考github - https://github.com/vitejs/vite。
1. 安装vite

npm install -g vite

复制代码

2. 创建VUE 3项目

npm init vite-app first-spreadjs-vue3

复制代码

vite 已经自带了VUE 3.0 bate版，无需安装vue@next直接安装运行即可。

cd first-spreadjs-vue3
npm install
npm run dev

复制代码

vite 无需编译，瞬间就启动好了，不用担心频发保存编译浪费时间
浏览器进入http://localhost:3000/ 效果如下，点击按钮计数

image.png915012512.png

二．创建SpreadJS组件
创建一个SpreadSheets组件，方便在其他页面中引用
1. src/components文件夹下创建 SpreadSheets.vue,参考HelloWorld添加template和script。template中写入SpreadJS作为示例

<template>
<div>
SpreadJS
</div>
</template>
<script>
export default {
name: 'SpreadSheets',
props: {
}
}
</script>

复制代码

2. App页面引用SpreadSheets组件
同样参考HelloWorld，引入SpreadSheets。刷新页面显示SpreadJS

<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
<SpreadSheets></SpreadSheets>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import SpreadSheets from './components/SpreadSheets.vue'
export default {
name: 'App',
components: {
HelloWorld,
SpreadSheets
}
}
</script>

复制代码

3. 安装SpreadJS
停止项目运行，安装SpreadJS后重新运行

npm install --save @grapecity/spread-sheets

复制代码

4. 在SpreadSheets.vue组件中初始化SpreadJS
通过ref获取SpreadJS host对象，并且在页面Mounted之后初始化SpreadJS

<template>
<div>
SpreadJS
<div ref="ssHost" style="height:500px;width:100%;text-align: left;"></div>
</div>
</template>
<script>
import { onMounted, ref} from "vue";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import GC from "@grapecity/spread-sheets"
export default {
name: 'SpreadSheets',
props: {
},
setup(props) {
const ssHost = ref(null);
onMounted(() => {
var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
});
return {
ssHost
};
}
}
</script>

复制代码

效果如图，下一篇将通过Events实现合并拆分单元格的功能
image.png960210266.png

sunnyLee · sunnyLee

为什么我打开Network的链接，显示未注册啊，明明已经注册了的 image.png507235717.png

Derrick.Jiao · Derrick.Jiao

sunnyLee 发表于 2021-11-12 10:37
为什么我打开Network的链接，显示未注册啊，明明已经注册了的

出现这个问题是因为没有添加授权，在没有授权的情况下，只能通过localhost本地访问。

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

在VUE 3中使用SpreadJS（一）

2 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

GrapeCity