基于Vue的SpreadJS(一)——环境搭建

vue项目

1. vue脚手架安装 : npm i vue-cli -g；
2. vue项目创建 : vue init webpack my-project（my-project是项目名）；
3. 安装项目依赖： npm install;
4. 启动测试：npm run dev;

第三步可能出现错误

解决方法

第一种：删除package-lock.json文件再重新执行第三步命令

第二种：删除node_modules文件再重新执行命令（要登等很久）
（第三步 安装依赖后最好关闭编译软件后重新打开，否则可能会不生效）

SpreadJS搭建

现在spreadJS已经全面支持vue啦，大大的便利了我们。

1. spreadJS官方文档 ，spreadJS中文文档；
2. 安装spreadJS依赖

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

3. 基础表格页面

<template>
<div class="financialKPI">
  <gc-spread-sheets :host-class="hostClass"
                    @workbookInitialized="spreadInitHandle" />
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import '@grapecity/spread-sheets-vue';
// import * as GC from '@grapecity/spread-sheets';
// import Excel from '@grapecity/spread-excelio';
// import Charts from '@grapecity/spread-sheets-charts';

export default {
data() {
  return {
    hostClass: 'spread-host',
  };
},
methods: {
  spreadInitHandle(spread) {
    // eslint-disable-next-line no-underscore-dangle
    this._spread = spread;
  },
},
};
</script>
<style scoped>
.financialKPI{
width: 100%;
height: 100%;
}
.spread-host {
width: 100%;
height: 100%;
border: 1px solid lightgray;
}

</style>

以上代码是spreadJs的入口，还有工具栏实现会在后续讲解，谢谢你的观看。