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.

<p>You can set the color of all the worksheets by setting the <strong>backColor</strong> 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 <strong>grayAreaBackColor</strong> option.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-comment">// set the worksheet's backcolor</span> spread.options.backColor = <span class="hljs-string">'red'</span>; <span class="hljs-comment">// and set the surrounding area</span> spread.options.grayAreaBackColor = <span class="hljs-string">'gray'</span>; </code></pre> <p>Alternatively, you can set a background image for the worksheets using the <strong>backgroundImage</strong> 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.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-comment">// Set a background image for the sheets</span> spread.options.backgroundImage = <span class="hljs-string">'images/backImage.png'</span>; </code></pre> <p>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 <strong>backgroundImageLayout</strong> option of the workbook. The four options are:</p> <ul> <li>stretch: the background image fills the area, even if the size of the area changes.</li> <li>center: the background image displays in the center of the area.</li> <li>zoom: the background image displays in the area while keeping its original aspect ratio.</li> <li>none: the background image displays in the upper left corner of the area in its original size.</li> </ul> <pre><code class="hljs js language-js"> spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.stretch; <span class="hljs-comment">//spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center;</span> <span class="hljs-comment">//spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.zoom;</span> <span class="hljs-comment">//spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;</span> </code></pre>
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="Del 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; }