보기(view) 배경 | 기능별 학습

워크시트의 배경 이미지는 워크시트의 backgroundImage 메서드를 사용하여 설정할 수 있습니다.

window.onload =  function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var pictureUrl = '';
var hasBackgroundImage = false;
var backgroundImageButton = _getElementById('backgroundImageButton');
var backgroundImageButtonLabel = backgroundImageButton.querySelector('.button-label');
var fileInput = _getElementById('file_input');
var repeatLayout = _getElementById('repeatLayout');
var paintOverContent = _getElementById('paintOverContent');
spread.suspendPaint();
spread.options.backColor = 'white';
spread.options.grayAreaBackColor = 'gray';
initWorksheetContent(spread.getActiveSheet());
spread.resumePaint();
function getBackgroundImageOption() {
return {
layout: repeatLayout.checked ? 'repeat' : 'none',
paintOrder: paintOverContent.checked ? 'over-content' : 'normal'
};
}
function applyBackgroundImage() {
const sheet = spread.getActiveSheet();
if (!hasBackgroundImage) {
sheet.backgroundImage('');
return;
}
sheet.backgroundImage(pictureUrl, getBackgroundImageOption());
}
function removeBackgroundImage() {
const sheet = spread.getActiveSheet();
pictureUrl = '';
hasBackgroundImage = false;
fileInput.value = '';
sheet.backgroundImage('');
backgroundImageButtonLabel.textContent = 'Choose Background';
backgroundImageButton.classList.remove('delete-button');
}
fileInput.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;
hasBackgroundImage = true;
backgroundImageButtonLabel.textContent = 'Delete Background Image';
backgroundImageButton.classList.add('delete-button');
applyBackgroundImage();
};
});
backgroundImageButton.addEventListener('click', function() {
if (hasBackgroundImage) {
removeBackgroundImage();
return;
}
fileInput.click();
});
repeatLayout.addEventListener('change', function() {
applyBackgroundImage();
});
paintOverContent.addEventListener('change', function() {
applyBackgroundImage();
});
}
function initWorksheetContent(sheet) {
var data = [
['Month', 'North', 'South', 'West', 'Total'],
['Jan', 7200, 5200, 3100, 16500],
['Feb', 7800, 5400, 3300, 17500],
['Mar', 8600, 6100, 3600, 19900],
['Apr', 9300, 6800, 3900, 22100],
['May', 10200, 7200, 4300, 23700],
['Jun', 10800, 7900, 4700, 25400]
];
var spreadNS = GC.Spread.Sheets;
var currencyFormatter = '$#,##0';
var border = new spreadNS.LineBorder('#dfe4ea', spreadNS.LineStyle.thin);
sheet.name('Sales');
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setColumnWidth(1, 110);
sheet.setColumnWidth(2, 110);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 110);
sheet.setColumnWidth(5, 120);
sheet.setRowHeight(1, 34);
sheet.setRowHeight(2, 24);
sheet.setRowHeight(4, 32);
sheet.addSpan(1, 1, 1, 5);
sheet.addSpan(2, 1, 1, 5);
sheet.setValue(1, 1, 'Monthly Sales Overview');
sheet.setValue(2, 1, 'Regional sales performance for the first half of the year');
sheet.setArray(4, 1, data);
sheet.setArray(12, 1, [['Grand Total', 53700, 39400, 21900, 115000]]);
sheet.getRange(1, 1, 1, 5)
.font('bold 22px Calibri')
.foreColor('#1f2937')
.hAlign(spreadNS.HorizontalAlign.left)
.vAlign(spreadNS.VerticalAlign.center);
sheet.getRange(2, 1, 1, 5)
.font('13px Calibri')
.foreColor('#6b7280')
.hAlign(spreadNS.HorizontalAlign.left);
sheet.getRange(4, 1, 1, 5)
.backColor('#23736b')
.foreColor('#ffffff')
.font('bold 12px Calibri')
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
sheet.getRange(5, 1, 6, 5)
.backColor('#ffffff')
.foreColor('#27364a')
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
sheet.getRange(5, 2, 6, 4).formatter(currencyFormatter);
sheet.getRange(4, 1, 7, 5).setBorder(border, { all: true });
for (var row = 5; row <= 10; row++) {
if ((row - 5) % 2 === 1) {
sheet.getRange(row, 1, 1, 5).backColor('#f8fafc');
}
}
sheet.getRange(12, 1, 1, 5)
.backColor('#e8f3f1')
.foreColor('#1f6f65')
.font('bold 12px Calibri')
.hAlign(spreadNS.HorizontalAlign.center)
.vAlign(spreadNS.VerticalAlign.center);
sheet.getRange(12, 2, 1, 4).formatter(currencyFormatter);
sheet.getRange(12, 1, 1, 5).setBorder(new spreadNS.LineBorder('#b6d7d2', spreadNS.LineStyle.thin), { all: true });
var chart = sheet.charts.add('salesChart', spreadNS.Charts.ChartType.columnClustered, 64, 320, 560, 300, 'B5:E11', spreadNS.Charts.RowCol.columns);
chart.title({ text: 'Monthly Sales' });
setChartSeriesColors(chart);
sheet.setActiveCell(sheet.getRowCount() - 1, sheet.getColumnCount() - 1);
}
function setChartSeriesColors(chart) {
var colors = ['#23736b', '#54a3a6', '#9bbf72'];
var series = chart.series();
colors.forEach(function(color, index) {
var seriesItem = series.get(index);
seriesItem.backColor = color;
seriesItem.border.color = '#ffffff';
seriesItem.border.width = 1;
series.set(index, seriesItem);
});
}
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="ko-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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="panel-description">
<span class="panel-description-text">Choose an image and adjust how it is displayed.</span>
</div>
<input type="file" name="image" id="file_input" accept="image/*" />
<button type="button" id="backgroundImageButton" class="material-button">
<span class="button-label">Choose Background</span>
</button>
<div class="option-group">
<label class="checkbox-row" for="repeatLayout">
<input type="checkbox" id="repeatLayout" checked />
<span class="checkbox-box"></span>
<span class="option-title">Repeat background image</span>
</label>
<label class="checkbox-row" for="paintOverContent">
<input type="checkbox" id="paintOverContent" checked />
<span class="checkbox-box"></span>
<span class="option-title">Paint over content</span>
</label>
</div>
</div>
</div>
</body>
</html>

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
color: #202124;
font-family: Roboto, Arial, sans-serif;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
padding: 20px;
height: 100%;
box-sizing: border-box;
background: #fafafa;
border-left: 1px solid #e0e0e0;
overflow: auto;
}
#file_input {
display: none;
}
.panel-description {
padding: 12px 14px;
border-left: 3px solid #1976d2;
border-radius: 4px;
background: #eef5ff;
margin-bottom: 40px;
}
.panel-description-text {
color: #3c4043;
font-size: 13px;
line-height: 18px;
}
.material-button {
width: 100%;
min-height: 38px;
padding: 0 16px;
border: 0;
border-radius: 4px;
background: #1976d2;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 38px;
letter-spacing: 0;
text-align: center;
text-transform: uppercase;
box-shadow: 0 2px 4px rgba(25, 118, 210, .26);
transition: background .15s ease, box-shadow .15s ease;
}
.material-button:hover {
background: #1565c0;
box-shadow: 0 3px 6px rgba(25, 118, 210, .32);
}
.material-button:focus-visible {
outline: 2px solid #8ab4f8;
outline-offset: 2px;
}
.material-button.delete-button {
background: #fff;
color: #d32f2f;
box-shadow: inset 0 0 0 1px #d32f2f;
}
.material-button.delete-button:hover {
background: #fff5f5;
box-shadow: inset 0 0 0 1px #c62828;
}
.option-group {
margin-top: 20px;
}
.checkbox-row {
display: flex;
align-items: center;
gap: 12px;
color: #3c4043;
cursor: pointer;
min-height: 40px;
padding: 8px 0;
user-select: none;
}
.checkbox-row + .checkbox-row {
margin-top: 8px;
}
.checkbox-row input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox-box {
position: relative;
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid #5f6368;
border-radius: 2px;
box-sizing: border-box;
transition: background .15s ease, border-color .15s ease;
}
.checkbox-row input:checked + .checkbox-box {
background: #1976d2;
border-color: #1976d2;
}
.checkbox-row input:checked + .checkbox-box::after {
content: "";
position: absolute;
left: 4px;
top: 0;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-row input:focus-visible + .checkbox-box {
outline: 2px solid #90caf9;
outline-offset: 2px;
}
.option-title {
color: #202124;
font-size: 14px;
line-height: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}