概述
本 Demo 展示了如何为 SpreadJS 工作簿设置背景样式，包括背景颜色、背景图片及其布局方式，以及灰色区域（表单周围空白区域）的背景色。Demo 提供了交互式操作界面，用户可以动态切换背景样式和上传自定义背景图片。
实现思路
初始化工作簿并设置基础行列数
设置工作簿的默认背景颜色和灰色区域颜色
加载预设的背景图片并指定布局方式
为布局选择器添加事件监听，动态切换背景图片的显示方式
为颜色选择器添加事件监听，动态更改背景色和灰色区域颜色
实现自定义背景图片的上传和设置功能
代码解析
设置工作簿背景颜色和灰色区域颜色
backColor 属性设置工作簿内容区域的背景色，grayAreaBackColor 设置表单周围灰色区域的背景色。两者都接受颜色字符串，如 'red'、'#FFFF00'、'rgb(255,0,0)' 等。如果同时设置了背景图片和背景颜色，背景图片会优先显示。
设置背景图片和布局方式
backgroundImage 属性设置背景图片的 URL，backgroundImageLayout 控制图片布局。ImageLayout 枚举提供四种布局方式：
stretch（值为 0）：拉伸图片以填充整个区域，忽略原始宽高比
center（值为 1）：图片居中显示
zoom（值为 2）：缩放图片以适应区域，保持原始宽高比
none（值为 3）：使用图片原始尺寸显示
动态切换背景图片布局
通过监听下拉框的 change 事件，动态修改 backgroundImageLayout 属性。Select 元素的 value 值直接对应 ImageLayout 枚举值（0-3）。
上传并设置自定义背景图片
使用 FileReader 读取用户上传的图片文件，转换为 Base64 URL。点击"设置"按钮时，将 Base64 URL 设置到 backgroundImage 属性。点击"删除背景图片"按钮时，清空 backgroundImage 属性以移除背景图片。
运行效果
页面加载后，工作簿显示预设的背景图片（拉伸布局）
通过"工作簿背景图片布局"下拉框可以切换四种布局方式：拉伸、居中、缩放、无
通过"选择一种颜色来设置工作簿灰色区域的颜色"下拉框可以更改灰色区域颜色（灰色、浅蓝色、浅绿色、白色）
通过"选择一种颜色来设置工作簿背景颜色"下拉框可以更改工作簿背景颜色，但需要先删除背景图片才能看到效果
点击"选择文件"按钮可以上传本地图片，再点击"设置"按钮应用自定义背景图片
点击"删除背景图片"按钮可以移除当前背景图片，显示背景颜色
API 参考
Workbook.options 属性
backColor：工作簿内容区域的背景颜色，接受颜色字符串
grayAreaBackColor：表单周围灰色区域的背景颜色
backgroundImage：背景图片的 URL
backgroundImageLayout：背景图片布局方式，使用 GC.Spread.Sheets.ImageLayout 枚举值
ImageLayout 枚举
定义背景图片的布局方式：
stretch：拉伸填充
center：居中显示
zoom：等比缩放
none：原始尺寸
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
var pictureUrl = '';
spread.suspendPaint();
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();
_getElementById('layout').addEventListener('change',function() {
var layout = parseInt(document.getElementById('layout').value);
spread.options.backgroundImageLayout = layout;
});
var grayAreaColor = _getElementById("grayAreaBackColor");
grayAreaColor.addEventListener("change", function () {
spread.options.grayAreaBackColor = grayAreaColor.options[grayAreaColor.selectedIndex].value;
});
var workBookColor = _getElementById("spreadBackColor");
workBookColor.addEventListener("change", function () {
spread.options.backColor = workBookColor.options[workBookColor.selectedIndex].value;
});
_getElementById('file_input').addEventListener('change', function() {
if (typeof this.files[0] !== 'object') {
return;
}
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
pictureUrl = this.result;
};
});
_getElementById('setSpreadBackgroundImage').addEventListener('click', function() {
spread.options.backgroundImage = pictureUrl;
});
_getElementById('delSpreadBackgroundImage').addEventListener('click', function() {
spread.options.backgroundImage = '';
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label>设置背景图片:</label>
<input type="file" name="image" id="file_input" />
</div>
<br>
<div class="option-row">
<label>工作簿背景图片布局:</label>
<select id="layout">
<option value="0" selected="selected">拉伸</option>
<option value="1">居中</option>
<option value="2">缩放</option>
<option value="3">无</option>
</select>
</div>
<div class="option-row">
<input type="button" id="setSpreadBackgroundImage" value="设置" class="narrow-button" />
<input type="button" id="delSpreadBackgroundImage" value="删除背景图片" />
</div>
<hr />
<div class="option-row">
<label>选择一种颜色来设置工作簿灰色区域的颜色。</label>
<select id="grayAreaBackColor">
<option value="gray">灰色</option>
<option value="rgb(220, 236, 244)">浅蓝色</option>
<option value="#F4F8EB">浅绿色</option>
<option value="white">白色</option>
</select>
</div>
<div class="option-row">
<label>选择一种颜色来设置工作簿背景颜色。</label>
<select id="spreadBackColor">
<option value="white">白色</option>
<option value="#F4F8EB">浅绿色</option>
<option value="rgb(220, 236, 244)">浅蓝色</option>
<option value="gray">灰色</option>
</select>
</div>
<label class="note"><u>注意</u>: 移除背景图片以查看此更改。</label>
</div>
</div>
</body>
</html>
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;
}
