概述
本 Demo 展示了如何为工作表设置自定义背景图片。Demo 提供了文件选择器让用户上传本地图片，使用 FileReader 将图片转换为 Base64 编码格式，然后通过点击按钮将图片应用到工作表背景，同时也支持随时删除背景图片恢复默认状态。
实现思路
初始化 SpreadJS 工作簿，设置工作簿背景色和灰色区域背景色
监听文件选择器的 change 事件，读取用户选择的图片文件
使用 FileReader 将图片转换为 Base64 编码格式，存储到变量中
点击"设置"按钮时，调用 backgroundImage 方法将图片应用到当前工作表
点击"删除背景图片"按钮时，传入空字符串清除工作表背景
代码解析
初始化工作簿并设置背景色
这段代码通过 spread.options 设置工作簿级别的背景色。backColor 设置工作表的背景颜色为白色，grayAreaBackColor 设置工作表周围灰色区域的背景色。使用 suspendPaint 和 resumePaint 可以避免频繁重绘，提升性能。
读取并转换图片文件
使用 FileReader API 的 readAsDataURL 方法将图片文件转换为 Base64 编码的数据 URL。转换完成后，通过 onload 回调获取 Base64 字符串并存储。这种格式可以直接用于设置背景图片，无需额外的服务器上传步骤。
设置工作表背景图片
调用 Worksheet 的 backgroundImage 方法，传入 Base64 编码的图片数据。这个方法支持多种图片源格式，包括图片 URL、Base64 数据 URL 和相对路径。
删除工作表背景图片
传入空字符串即可清除工作表的背景图片，恢复到默认的背景色显示。
运行效果
页面加载后，工作表显示为白色背景，周围灰色区域显示为灰色
点击文件选择器，选择本地图片文件（支持 jpg、png、gif 等常见图片格式）
点击"设置"按钮，选中的图片将应用为工作表背景
点击"删除背景图片"按钮，背景图片将被清除，恢复为默认背景色
文件选择后立即进行格式验证，非图片文件会弹出提示
API 参考
backgroundImage 方法
src：可选参数，图片源字符串，支持以下格式：
图片 URL（如 "https://example.com/image.jpg"）
Base64 数据 URL（如 "data:image/png;base64,…"）
相对路径（如 "/images/background.png"）
返回值：不带参数调用时返回当前背景图片的 URL，带参数时设置背景图片
Workbook.options 属性
options.backColor：工作表的背景颜色，接受颜色字符串（如 "red"、"#FFFF00"）
options.grayAreaBackColor：工作表周围灰色区域的背景颜色，接受颜色字符串
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var pictureUrl = '';
spread.suspendPaint();
spread.options.backColor = 'white';
spread.options.grayAreaBackColor = 'gray';
spread.resumePaint();
_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() {
const sheet = spread.getActiveSheet();
sheet.backgroundImage(pictureUrl);
});
_getElementById('delSpreadBackgroundImage').addEventListener('click', function() {
const sheet = spread.getActiveSheet();
sheet.backgroundImage('');
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<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">
<input type="button" id="setSpreadBackgroundImage" value="设置" class="narrow-button" />
<input type="button" id="delSpreadBackgroundImage" value="删除背景图片" />
</div>
<hr />
<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;
}
