To work with the worksheets of the SpreadJS workbook you need a reference to one of the worksheets. You can access any worksheet by its index, which is its position in the workbook, using the getSheet method of the Workbook object or using its name, which is the sheet's tab name, using the getSheetFromName workbook method. For example:
Use the Workbook getActiveSheet method to get an instance of the currently active worksheet.
To change the active worksheet use the setActiveSheetIndex method and provide the index of the desired sheet. For example:
Once you have a reference to a worksheet, you can use it to customize it as illustrated by the demos in the Worksheet section.
Other useful methods to work with the workbook sheets:
addSheet: add a named sheet at a specific position in the workbook.
getSheetCount: get the number of sheets in the workbook and use it to append a sheet to the workbook.
removeSheet and clearSheets: remove a sheet by index or clear all the workbook sheets.
getActiveSheetIndex: get the index of the ActiveSheet.
changeSheetIndex: change activeSheet to another index.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label>Use the below buttons to add, remove or clear all sheets from the current workbook.</label>
</div>
<div class="option-row">
<input type="button" value="Add Sheet" id="btnAddSheet" @click="addSheet($event)" />
<input type="button" value="Remove Sheet" id="btnRemoveSheet" @click="removeSheet($event)" />
<input type="button" value="Clear Sheets" id="btnClearSheets" @click="clearSheets($event)" />
</div>
<div class="option-row">
<label>ActiveSheetIndex:</label>
<input type="text" id="activeSheetIndex" v-model="activeSheetIndex" />
<input type="button" id="btnSetActiveSheetIndex" value="Set" @click="setActiveSheetIndex($event)" />
</div>
<div class="option-row">
<label>This switches the currently active sheet to the sheet at the specified index.</label>
</div>
<div class="option-row">
<label>ChangeSheetIndex</label>
<label>Sheet Name:</label>
<input type="text" v-model="sheetName" />
<label>Target Index:</label>
<input type="text" v-model="targetIndex" />
<input type="button" value="Set" @click="changeSheetIndex($event)" />
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
let spread = null;
const activeSheetIndex = ref(0);
const sheetName = ref('Sheet1');
const targetIndex = ref(2);
const initSpread = (s) => spread = s;
const addSheet = () => {
const activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.addSheet(activeIndex + 1);
spread.setActiveSheetIndex(activeIndex + 1);
}
else {
spread.addSheet(0);
spread.setActiveSheetIndex(0);
}
}
const removeSheet = () => {
const activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.removeSheet(activeIndex);
}
}
const clearSheets = () => {
spread.clearSheets();
}
const setActiveSheetIndex = () => {
let index = activeSheetIndex.value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.setActiveSheetIndex(index);
}
}
}
const changeSheetIndex = () => {
let index = targetIndex.value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index <= spread.getSheetCount()) {
spread.changeSheetIndex(sheetName.value, index);
}
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 3px;
margin-top: 3px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width: 100%;
text-align: center;
}
input[type=text] {
width: 230px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
