[]
SpreadJS 支持 Vue，这是一个 JavaScript 框架，为开发者提供了独特的工具，助力构建复杂的用户界面和 Web 应用程序。
要使用组合式 API 在 Vue 3 中创建应用程序，请按照以下步骤操作：
创建 Vue 项目
打开命令提示符窗口，输入以下命令创建一个简单的 Vue 项目：
vue create sjs-vue-app
cd sjs-vue-app完成后，Vue 项目将在指定的目录位置创建。
有关如何创建 Vue 项目的更多信息，请参阅 https://vuejs.org/guide/quick-start.html。
在项目中导入 SpreadJS Vue 模块
使用以下命令在项目中安装 SpreadJS Vue 模块：
npm install @grapecity-software/spread-sheets-vue
npm install @grapecity-software/spread-sheets在 Vue 应用程序中使用 SpreadJS 并授权 SpreadJS
使用以下示例代码修改 main.js 文件：
import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity-software/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')使用以下示例代码修改 App.vue 文件。在初始化组件之前，你可以输入有效的 SpreadJS 许可证密钥。在以下代码片段中，Spread 组件使用了 setup 函数（这是一个组合式 API 函数）。hostClass 的值和 initWorkbook 函数在 setup 函数中声明，并作为对象返回。
<template>
<div>
<gc-spread-sheets
:hostClass="hostClass"
@workbookInitialized="initWorkbook"
>
</gc-spread-sheets>
</div>
</template>
<script>
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import * as GC from '@grapecity-software/spread-sheets';
import '@grapecity-software/spread-sheets-vue';
// Licensing SpreadJS
var SpreadJSKey = 'xxx'; // Enter a valid license key.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
export default {
name: 'App',
setup() {
const hostClass = 'spread-host';
function initWorkbook(spread) {
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, 'Hello');
}
return {
hostClass,
initWorkbook,
};
},
};
</script>
<style>
.spread-host {
width: 100%;
height: 600px;
}
</style>保存并运行应用程序
npm run serveVue 3 还支持 TypeScript，它可以通过静态分析识别许多常见的运行时问题。如果你选择使用 TypeScript，请按照以下步骤操作：
创建 Vue 项目
在命令提示符中输入以下命令创建 Vue 项目：
npm init vue@latest sjs-vue-app
cd sjs-vue-app该命令将提示可添加到 Vue 项目的其他可选功能。
添加 TypeScript
对于 “Add TypeScript” 查询选择 “Yes”。
安装 npm 包
运行以下命令安装 npm 包。先安装 npm 包，然后再安装以下包：
npm install @grapecity-software/spread-sheets-vue
npm install @grapecity-software/spread-sheets使用组件
在相应组件中直接使用 SpreadJS Vue 组件。修改 App.vue 文件，并按照以下示例代码使用带有 <script setup> 的 TypeScript。
<template>
<div id="spread-host">
<gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
</gc-spread-sheets>
</div>
</template>
<script setup lang="ts">
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import * as GC from '@grapecity-software/spread-sheets';
import { GcSpreadSheets } from '@grapecity-software/spread-sheets-vue';
function initWorkbook(spread: GC.Spread.Sheets.Workbook) {
let sheet = spread.getActiveSheet();
sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS');
}
</script>
<style
.spreadHost {
width: 800px;
height: 800px;
}
</style>注意：如果在本地导入组件，则无需额外配置。
运行项目
保存并使用以下命令运行项目：
npm run dev创建 Vue 项目
打开命令提示符窗口，输入以下命令创建一个简单的 Vue 项目：
npm install -g @vue/cli
npm i -g @vue/cli-init
vue init webpack spreadjs-quickstart :: Here, select Vue 2.
cd spreadjs-quickstart
npm run dev 完成后，Vue 项目将在指定的目录位置创建。有关如何创建 Vue 项目的更多信息，请参阅 https://v2.vuejs.org/v2/guide/installation.html。
在项目中导入 SpreadJS Vue 模块
使用以下命令在项目中安装 @grapecity-software/spread-sheets-vue：
npm install @grapecity-software/spread-sheets-vue在 Vue 应用程序中使用 SpreadJS 并授权 SpreadJS
根据你的需求修改 App.vue 文件。刷新浏览器窗口时，更改将生效。在初始化组件之前，你可以输入有效的 SpreadJS 许可证密钥。例如，你可以使用以下示例代码：
<template>
<div>
<gc-spread-sheets :hostClass='hostClass'>
</gc-spread-sheets>
</div>
</template>
<script>
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import * as GC from '@grapecity-software/spread-sheets';
import '@grapecity-software/spread-sheets-vue';
// Licensing SpreadJS
var SpreadJSKey = 'xxx'; // Enter a valid license key.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
export default {
data() {
return {
hostClass: 'spread-host'
};
},
computed: {
dataTable() {
let dataTable = [];
for (let i = 0; i < 42; i++) {
dataTable.push({ price: i + 0.56 });
}
return dataTable;
},
},
};
</script>
<style scoped>
.spread-host {
width: 500px;
height: 600px;
}
</style>保存并运行应用程序
npm run devSpreadJS 可通过传统 HTML 与 Vue 2 一起使用。此方法涉及以下步骤：
创建 HTML 页面
第一步，你需要创建一个 HTML 页面。
将 SpreadJS 和 Vue - SpreadJS 添加到 HTML 模板
在 HTML 模板（即你的 index.html 文件）中添加对 gc.spread.sheets.all.*.*.*.min.js、gc.SpreadJS.*.*.*.css 和 gc.spread.sheets.vue.*.*.*.js 文件的引用。
在 Vue 应用程序中使用 SpreadJS 并授权 SpreadJS
现在，你可以在 Vue 应用程序中使用 SpreadJS。在初始化组件之前，你可以输入有效的 SJS 许可证密钥。例如，你可以使用以下示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello SpreadJS Vue</title>
<link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
<style>
#app{
width: 100%;
height:100%;
}
.vue-demo{
width: 800px;
height:400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template"><div><gc-spread-sheets
v-bind:hostClass='hostClass'
@workbookInitialized='spreadInitHandle'
></gc-spread-sheets></div></script>
<script type="text/javascript">
window.onload = function () {
// Licensing SpreadJS
GC.Spread.Sheets.LicenseKey = 'xxx'; // Enter a valid license key.
Vue.component('app', {
template: '#app-template',
data: function () {
return {
hostClass: 'vue-demo',
};
},
methods: {
spreadInitHandle: function (spread) {
window.mySpread = spread;
console.log('now you can also get spread from window');
},
},
});
new Vue({
el: '#app',
});
};
</script>
</body>
</html>