View Background

This sample demonstrates customizing the workbook background using JavaScript API. In the demo below, follow the instructions to change the background and see how it is reflected in the workbook.

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.
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; }); _getElementById('setGrayAreaBackColor').addEventListener('click', function() { var color = document.getElementById('grayAreaBackColor').value; spread.options.grayAreaBackColor = color; }); _getElementById('setSpreadBackColor').addEventListener('click', function() { var color = document.getElementById('spreadBackColor').value; spread.options.backColor = color; }); _getElementById('file_input').addEventListener('change', function() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert('The file muse be 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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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 >Enter a color name to set the color of the workbook gray area.</label> </div> <div class="option-row"> <input type="text" id="grayAreaBackColor"/> <input type="button" id="setGrayAreaBackColor" value="Set Gray Area BackColor"/> </div> <div class="option-row"> <label >Enter a color name to set the workbook background color.</label> <label class="note">Note: remove background image at the bottom to see this change.</label> </div> <div class="option-row"> <input type="text" id="spreadBackColor"/> <input type="button" id="setSpreadBackColor" value="Set Workbook BackColor"/> </div> <div class="option-row"> <label >Image:</label> <input type="file" name="image" id="file_input" /> </div> <div class="option-row"> <label >Workbook Background Image Layout:</label> <select id="layout" > <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" /> <input type="button" id="delSpreadBackgroundImage" value="Delete Background Image" /> </div> </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: lavender; } .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; }