spreadJS的基础使用总结
通过spreadJS实现excel的项目需求，spreadjs以excel的方式通过js和vue框架的基本使用
·
前言：项目需excel的呈现，以及填写或者按照选区的入库等基本逻辑和交互，经技术评审后选择通过spreadJS来实现。项目使用了js和vue3两种方式来实现，以下可供参考的Demo仅代表个人使用后的小结，有可优化的点以及更好的方法，还请小伙伴们指正噢。
1，参考官方文档按照快速开始步骤根据框架应用到项目
SpreadJS 示例 | SpreadJS JavaScript 学习指南
- 创建项目
- 项目运行后逐步安装依赖【建议先在package.json中直接C下需要安装的依赖以及版本后通过终端初始化，各依赖版本不同可能导致一些api的报错】
- main.js中全局化组件或直接通过JS的写法在项目中引用
- 应用程序
2，项目程序Demo
main.js --- 注：引入顺序要注意否则会导致依赖引入失效问题
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import "@grapecity-software/spread-sheets-designer-resources-cn";
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity-software/spread-sheets-vue'
import Designer from "@grapecity-software/spread-sheets-designer-vue"
import '@/assets/css/main.less'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.component("gc-spread-sheets-designer", Designer);
app.use(router).use(ElementPlus).mount("#app");sheets的使用 / js方式 --- SheetsJs.vue 注：注意资源引入顺序
<template>
<div class="home">
<h1 class="h1">user-in-js</h1>
<div class="buttons">
<el-button @click="FnStyle">添加样式</el-button>
<el-button @click="Fnreset">重置</el-button>
</div>
<div id="ss" class="sample-spreadsheets"></div>
</div>
</template>
<script setup>
// @ is an alias to /src
import { onMounted } from 'vue';
import * as GC from "@grapecity-software/spread-sheets";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import '@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js'
// 通过原始状态声明变量，不使用代理的方法 因为与spread方法封装的代理可能发生冲突
let spread = null
let sheet = null
let spreadNS = GC.Spread.Sheets
function init() {
spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
sheet = spread.getActiveSheet()
sheet.setRowCount(100) // sheet行数
sheet.setColumnCount(30) // sheet列数
sheet.setActiveCell(1,1) // 设置sheet选中的单元格
sheet.clearSelection() // 清除默认选中的单元格
spread.options.scrollbarMaxAlign = true // 仅展示sheet区间范围 不做留白延伸
spread.options.newTabVisible = false // 不可新增sheet
spread.options.allowContextMenu = false // 右键不可见附加的操作菜单
sheet
.getCell(0, 0) // 获取单元格
.vAlign(GC.Spread.Sheets.VerticalAlign.center) // 单元格设置格式
.value("Hello world") // 设置值
.backColor('pink'); // 设置背景色
sheet
.getRange(row, col, rowCount, colCount)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.value("2")
.backColor('pink');
// sheet常用事件
spread.bind(spreadNS.Events.CellClick, function (e, args) {
console.log(e, args, '--------------------------------CellClick')
})
spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanging')
})
spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanged')
})
spread.bind(spreadNS.Events.EditStarting, function (e, args) {
console.log(e, args, '--------------------------------EditStarting')
})
spread.bind(spreadNS.Events.EditEnded, function (e, args) {
console.log(e, args, '--------------------------------EditEnded')
})
spread.bind(spreadNS.Events.CellDoubleClick, function (e, args) {
console.log(e, args, '--------------------------------CellDoubleClick')
})
}
// 重置
function Fnreset() {
sheet.reset() // sheet初始化
sheet.options.isProtected = true // 表单保护
sheet.getRange(0,0,3,3).locked(true) // 区域锁定不可编辑，getRange参数：row,col,rowCount,colCount
}
// 设置样式
let [ row, col, colCount, rowCount ] = [3,3,3,9]
function FnStyle() {
let style = new GC.Spread.Sheets.Style();
let style1 = new GC.Spread.Sheets.Style();
let lineStyle = GC.Spread.Sheets.LineStyle.thin;
let lineStyle1 = GC.Spread.Sheets.LineStyle.thick;
let lineBorder = new GC.Spread.Sheets.LineBorder('blue', lineStyle);
style1.backColor = 'yellow';
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.locked = true;
style.locked = false;
sheet.setDefaultStyle(style);
sheet.getRange(row, col, rowCount, colCount).setStyle(style1);
sheet.getRange(row, col, rowCount, colCount).setBorder(lineBorder, { all: true });
}
function _getElementById(id) {
return document.getElementById(id);
}
onMounted(()=>{
init() // spread初始化
})
</script>
<style lang="less" scoped>
.sample-spreadsheets {
width: 100%;
height: 650px;
overflow: hidden;
float: left;
}
</style>
sheets的使用 / component方式 --- SheetsJs.vue 注：重要的事情说三遍注意资源引入顺序
<template>
<div class="about">
<h1 class="h1">user-in-component</h1>
<div class="buttons">
<el-button @click="FnStyle">添加样式</el-button>
<el-button @click="Fnreset">重置</el-button>
</div>
<gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
</gc-spread-sheets>
</div>
</template>
<script setup>
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";
let spread = null
let sheet = null
let spreadNS = GC.Spread.Sheets
function initWorkbook(spread) {
spread
sheet = spread.getActiveSheet();
sheet.setRowCount(100) // sheet行数
sheet.setColumnCount(30) // sheet列数
sheet.setActiveCell(1,1) // 设置sheet选中的单元格
sheet.clearSelection() // 清除默认选中的单元格
spread.options.scrollbarMaxAlign = true // 仅展示sheet区间范围 不做留白延伸
spread.options.newTabVisible = false // 不可新增sheet
spread.options.allowContextMenu = false // 右键不可见附加的操作菜单
sheet.options.isProtected = true // 表单保护
sheet
.getCell(0, 0)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.value("Hello world")
.backColor('pink'); // 设置背景色
sheet
.getRange(row, col, rowCount, colCount)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.value("2")
.backColor('pink');
// sheet绑定事件
spread.bind(spreadNS.Events.CellClick, function (e, args) {
console.log(e, args, '--------------------------------CellClick')
})
spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanging')
})
spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanged')
})
spread.bind(spreadNS.Events.EditStarting, function (e, args) {
console.log(e, args, '--------------------------------EditStarting')
})
spread.bind(spreadNS.Events.EditEnded, function (e, args) {
console.log(e, args, '--------------------------------EditEnded')
})
spread.bind(spreadNS.Events.CellDoubleClick, function (e, args) {
console.log(e, args, '--------------------------------CellDoubleClick')
})
}
// 重置
function Fnreset() {
sheet.reset() // sheet初始化
sheet.options.isProtected = true // 表单保护
sheet.getRange(0,0,3,3).locked(true) // 区域锁定不可编辑，getRange参数：row,col,rowCount,colCount
}
// 设置样式
let [ row, col, colCount, rowCount ] = [3,3,3,9]
function FnStyle() {
let style = new GC.Spread.Sheets.Style();
let style1 = new GC.Spread.Sheets.Style();
let lineStyle = GC.Spread.Sheets.LineStyle.thin;
let lineStyle1 = GC.Spread.Sheets.LineStyle.thick;
let lineBorder = new GC.Spread.Sheets.LineBorder('blue', lineStyle);
style1.backColor = 'yellow';
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.locked = true;
style.locked = false;
sheet.setDefaultStyle(style);
sheet.getRange(row, col, rowCount, colCount).setStyle(style1);
sheet.getRange(row, col, rowCount, colCount).setBorder(lineBorder, { all: true });
}
</script>
<style lang="less" scoped>
.spreadHost {
width: 100%;
height: 650px;
}
</style>sheetsdesigner的使用 / js方式 --- DesignerJs.vue
<template>
<div class="home">
<h1 class="h1">designer-user-in-js</h1>
<div class="buttons">
<el-button @click="FnStyle">添加样式</el-button>
<el-button @click="Fnreset">重置</el-button>
</div>
<div id="ss" class="sample-spreadsheets"></div>
</div>
</template>
<script setup>
// 此处要注意依赖的引入顺序，顺序混乱可能会导致有依赖关系的包加载失败
import { onMounted } from 'vue';
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity-software/spread-sheets-vue";
import * as GC from "@grapecity-software/spread-sheets";
import "@grapecity-software/spread-sheets-io";
import "@grapecity-software/spread-sheets-resources-zh";
import "@grapecity-software/spread-sheets-designer-resources-cn";
import "@grapecity-software/spread-sheets-designer";
// 通过原始状态声明变量，不使用代理的方法 因为与spread方法封装的代理可能发生冲突
let spread = null
let sheet = null
let spreadNS = GC.Spread.Sheets
let config = GC.Spread.Sheets.Designer.DefaultConfig; // designer使用默认配置信息
function init() {
var designer = new GC.Spread.Sheets.Designer.Designer(_getElementById('ss'), config);
spread = designer.getWorkbook()
sheet = spread.getActiveSheet()
sheet.setRowCount(100) // sheet行数
sheet.setColumnCount(30) // sheet列数
sheet.setActiveCell(1,1) // 设置sheet选中的单元格
sheet.clearSelection() // 清除默认选中的单元格
spread.options.scrollbarMaxAlign = true // 仅展示sheet区间范围 不做留白延伸
spread.options.newTabVisible = false // 不可新增sheet
spread.options.allowContextMenu = false // 右键不可见附加的操作菜单
sheet.options.isProtected = true // 表单保护
sheet
.getCell(0, 0)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.value("Hello world")
.backColor('pink'); // 设置背景色
sheet
.getRange(row, col, rowCount, colCount)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.value("2")
.backColor('pink');
// sheet绑定事件
spread.bind(spreadNS.Events.CellClick, function (e, args) {
console.log(e, args, '--------------------------------CellClick')
})
spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanging')
})
spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanged')
})
spread.bind(spreadNS.Events.EditStarting, function (e, args) {
console.log(e, args, '--------------------------------EditStarting')
})
spread.bind(spreadNS.Events.EditEnded, function (e, args) {
console.log(e, args, '--------------------------------EditEnded')
})
spread.bind(spreadNS.Events.CellDoubleClick, function (e, args) {
console.log(e, args, '--------------------------------CellDoubleClick')
})
}
// 重置
function Fnreset() {
sheet.reset() // sheet初始化
sheet.options.isProtected = true // 表单保护
sheet.getRange(0,0,3,3).locked(true) // 区域锁定不可编辑，getRange参数：row,col,rowCount,colCount
}
// 设置样式
let [ row, col, colCount, rowCount ] = [3,3,3,9]
function FnStyle() {
let style = new GC.Spread.Sheets.Style();
let style1 = new GC.Spread.Sheets.Style();
let lineStyle = GC.Spread.Sheets.LineStyle.thin;
let lineStyle1 = GC.Spread.Sheets.LineStyle.thick;
let lineBorder = new GC.Spread.Sheets.LineBorder('blue', lineStyle);
style1.backColor = 'yellow';
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.locked = true;
style.locked = false;
sheet.setDefaultStyle(style);
sheet.getRange(row, col, rowCount, colCount).setStyle(style1);
sheet.getRange(row, col, rowCount, colCount).setBorder(lineBorder, { all: true });
}
function _getElementById(id) {
return document.getElementById(id);
}
onMounted(()=>{
init() // spread初始化
})
</script>
<style lang="less" scoped>
.sample-spreadsheets {
width: 100%;
height: 650px;
overflow: hidden;
float: left;
}
</style>
sheetsdesigner的使用 / component方式 --- DesignerCom.vue
<template>
<div class="about">
<h1 class="h1">designer-user-in-component</h1>
<div class="buttons">
<el-button @click="FnStyle">添加样式</el-button>
<el-button @click="Fnreset">重置</el-button>
</div>
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"
@designerInitialized="initSpread"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity-software/spread-sheets-vue";
import * as GC from "@grapecity-software/spread-sheets";
import "@grapecity-software/spread-sheets-charts";
import "@grapecity-software/spread-sheets-shapes";
import "@grapecity-software/spread-sheets-slicers";
import "@grapecity-software/spread-sheets-print";
import "@grapecity-software/spread-sheets-barcode";
import "@grapecity-software/spread-sheets-pdf";
import "@grapecity-software/spread-sheets-formula-panel";
import "@grapecity-software/spread-sheets-io";
import "@grapecity-software/spread-sheets-resources-zh";
import "@grapecity-software/spread-sheets-designer-resources-cn";
import "@grapecity-software/spread-sheets-designer";
GC.Spread.Common.CultureManager.culture("zh-cn");
const styleInfo = ref({ height: '650px', width: '100%' })
let config = GC.Spread.Sheets.Designer.DefaultConfig; // designer使用默认配置信息
let spread = null
let sheet = null
let spreadNS = GC.Spread.Sheetsa
function initSpread(value) {
spread = value.getWorkbook();
sheet = spread.getActiveSheet();
sheet.setRowCount(100) // sheet行数
sheet.setColumnCount(30) // sheet列数
sheet.setActiveCell(1,1) // 设置sheet选中的单元格
sheet.clearSelection() // 清除默认选中的单元格
spread.options.scrollbarMaxAlign = true // 仅展示sheet区间范围 不做留白延伸
spread.options.newTabVisible = false // 不可新增sheet
spread.options.allowContextMenu = false // 右键不可见附加的操作菜单
sheet.options.isProtected = true // 表单保护
sheet
.getCell(0, 0)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.value("Hello world")
.backColor('pink'); // 设置背景色
sheet
.getRange(row, col, rowCount, colCount)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.value("2")
.backColor('pink');
// sheet绑定事件
spread.bind(spreadNS.Events.CellClick, function (e, args) {
console.log(e, args, '--------------------------------CellClick')
})
spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanging')
})
spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
console.log(e, args, '--------------------------------SelectionChanged')
})
spread.bind(spreadNS.Events.EditStarting, function (e, args) {
console.log(e, args, '--------------------------------EditStarting')
})
spread.bind(spreadNS.Events.EditEnded, function (e, args) {
console.log(e, args, '--------------------------------EditEnded')
})
spread.bind(spreadNS.Events.CellDoubleClick, function (e, args) {
console.log(e, args, '--------------------------------CellDoubleClick')
})
}
// 重置
function Fnreset() {
sheet.reset() // sheet初始化
sheet.options.isProtected = true // 表单保护
sheet.getRange(0,0,3,3).locked(true) // 区域锁定不可编辑，getRange参数：row,col,rowCount,colCount
}
// 设置样式
let [ row, col, colCount, rowCount ] = [3,3,3,9]
function FnStyle() {
let style = new GC.Spread.Sheets.Style();
let style1 = new GC.Spread.Sheets.Style();
let lineStyle = GC.Spread.Sheets.LineStyle.thin;
let lineStyle1 = GC.Spread.Sheets.LineStyle.thick;
let lineBorder = new GC.Spread.Sheets.LineBorder('blue', lineStyle);
style1.backColor = 'yellow';
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.locked = true;
style.locked = false;
sheet.setDefaultStyle(style);
sheet.getRange(row, col, rowCount, colCount).setStyle(style1);
sheet.getRange(row, col, rowCount, colCount).setBorder(lineBorder, { all: true });
}
</script>
<style lang="less" scoped>
.spreadHost {
width: 100%;
height: 650px;
}
</style>总结了一下项目中常用的api，具体的使用方法已经在代码以及注释中呈现，其中绑定的事件嵌套逻辑时应注意执行顺序。后有需要添加的常用基本方法会持续更新。
葡萄城是专业的软件开发技术和低代码平台提供商，聚焦软件开发技术，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)