You can set the color of all the worksheets by setting the backColor option of the workbook to a color name ("red"), hex value ("#FFFF00"), rgb value (rgb(255,0,0)), or style ("Accent 5"). You can also set the color of the inactive area below the rows and to the right of the columns using the grayAreaBackColor option.
Alternatively, you can set a background image for the worksheets using the backgroundImage option of the workbook. Note that setting a background image overrides any set background color and it has to be removed for the background color to take effect.
You can choose one of four background image layouts to change how the image is displayed in the background of the sheet by setting the backgroundImageLayout option of the workbook. The four options are:
stretch: the background image fills the area, even if the size of the area changes.
center: the background image displays in the center of the area.
zoom: the background image displays in the area while keeping its original aspect ratio.
none: the background image displays in the upper left corner of the area in its original size.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label>Set Background Image:</label>
<input type="file" name="image" id="file_input" @change="selectImage" />
</div>
<br />
<div class="option-row">
<label>Workbook Background Image Layout:</label>
<select id="layout" @change="changeLayout">
<option value="0" selected="selected">Stretch</option>
<option value="1">Center</option>
<option value="2">Zoom</option>
<option value="3">None</option>
</select>
</div>
<div class="option-row">
<input type="button" id="setSpreadBackgroundImage" value="Set" class="narrow-button"
@click="setSpreadBackgroundImage" />
<input type="button" id="delSpreadBackgroundImage" value="Delete Background Image"
@click="deleteSpreadBackgroundImage" />
</div>
<hr />
<div class="option-row">
<label>Select a color to set as the color of the workbook gray area.</label>
<select id="grayAreaBackColor" @change="changeGrayAreaBackColor">
<option value="gray">Gray</option>
<option value="rgb(220, 236, 244)">Light Blue</option>
<option value="#F4F8EB">Light Green</option>
<option value="white">White</option>
</select>
</div>
<div class="option-row">
<label>Select a color to set as the workbook background color.</label>
<select id="spreadBackColor" @change="changeSpreadBackColor">
<option value="white">White</option>
<option value="#F4F8EB">Light Green</option>
<option value="rgb(220, 236, 244)">Light Blue</option>
<option value="gray">Gray</option>
</select>
</div>
<label class="note"><u>Note</u>: remove background image to see this change.</label>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
let spread = null;
let pictureUrl = '';
const initSpread = (s) => {
spread = s;
spread.suspendPaint();
const spreadNS = GC.Spread.Sheets;
const sheet = spread.getSheet(0);
sheet.setRowCount(15);
sheet.setColumnCount(20);
spread.options.backColor = 'white';
spread.options.grayAreaBackColor = 'gray';
spread.options.backgroundImageLayout = spreadNS.ImageLayout.stretch;
spread.options.backgroundImage = '$DEMOROOT$/spread/source/images/backImage.png';
spread.resumePaint();
}
const changeGrayAreaBackColor = (e) => {
const grayAreaColor = e.target;
spread.options.grayAreaBackColor = grayAreaColor.options[grayAreaColor.selectedIndex].value;
}
const changeSpreadBackColor = (e) => {
const workBookColor = e.target;
spread.options.backColor = workBookColor.options[workBookColor.selectedIndex].value;
}
const selectImage = (e) => {
if (typeof e.target.files[0] !== 'object') {
return;
}
const file = e.target.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
pictureUrl = reader.result;
};
}
const changeLayout = (e) => {
const layout = parseInt(e.target.value);
spread.options.backgroundImageLayout = layout;
}
const setSpreadBackgroundImage = (e) => {
spread.options.backgroundImage = pictureUrl;
}
const deleteSpreadBackgroundImage = (e) => {
spread.options.backgroundImage = '';
}
</script>
<style scoped>
#app {
height: 100%;
}
input[type="button"] {
width: 180px;
}
input[type="text"] {
padding: 4px;
margin-top: 4px;
width: 100%;
box-sizing: border-box;
}
label {
display: inline-block;
margin-bottom: 6px;
}
.note {
margin-top: 0px;
}
.colorLabel {
background-color: #F4F8EB;
}
.wide-label {
width: 260px;
}
input.narrow-button,
.narrow-label {
width: 74px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row:nth-child(1) {
padding-bottom: 0px;
}
.option-row:nth-child(2) {
margin-top: 0px;
padding-top: 0px;
}
.option-row:nth-child(3) {
padding-bottom: 0px;
}
.option-row:nth-child(4) {
margin-top: 0px;
padding-top: 0px;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
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);
