Zoom

With SpreadJS you can zoom the worksheet view in and out for varying levels of detail. In addition, the zoom level can be controlled using ViewZooming and ViewZoomed events.

Zoom operations Ctrl + Mousewheel Status bar zoom indicator Double fingers operation, touchable only Use API sheet.zoom(zoomFactor) AllowUserZoom We provide a spread option called allowUserZoom to control whether sheet viewport could be zoomed: Get or set zoom factor through API ViewZooming / ViewZoomed Events In order to intervene in the zooming process on different worksheets / spreads instance, we provide two events: GC.Spread.Sheets.Events.ViewZooming The available arguments in its handler function: sheet: The sheet that triggered the event. sheetName: The sheet's name. newZoomFactor: The new zoom factor, user could make some change to intervene the real zoom action. oldZoomFactor: The old zoom factor. cancel: A value that indicates whether the operation should be canceled. GC.Spread.Sheets.Events.ViewZoomed The available arguments in its handler function: sheet: The sheet that triggered the event. sheetName: The sheet's name. newZoomFactor: The new zoom factor, user could make some change to intervene the real zoom action. oldZoomFactor: The old zoom factor.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initStatusBar(spread); initSpread(spread); initEvents(spread); }; function initStatusBar(spread) { var statusBarDOM = document.getElementById('statusBar'); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(statusBarDOM); statusBar.bind(spread); } function initSpread(spread) { var sheet = spread.getActiveSheet(); } function initEvents(spread) { var zoomFactorDOM = document.getElementById('zoomFactor'); var limitSwitch = document.getElementById('useLimit'); var maxZoomDOM = document.getElementById('maxZoom'); var minZoomDOM = document.getElementById('minZoom'); zoomFactorDOM.addEventListener('input', function() { var sheet = spread.getActiveSheet(); if (sheet) { var zoomFactor = parseFloat(this.value); var useLimit = limitSwitch.checked; var maxZoomFactor = parseFloat(maxZoomDOM.value), minZoomFactor = parseFloat(minZoomDOM.value); if (useLimit) { if (zoomFactor >= maxZoomFactor) { zoomFactor = maxZoomFactor; } if (zoomFactor <= minZoomFactor) { zoomFactor = minZoomFactor; } } zoomFactorDOM.value = zoomFactor; sheet.zoom(zoomFactor); } }); limitSwitch.addEventListener('change', syncDOM); spread.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, args) { var useLimit = limitSwitch.checked; var maxZoomFactor = parseFloat(maxZoomDOM.value), minZoomFactor = parseFloat(minZoomDOM.value); if (useLimit) { if (args.newZoomFactor >= maxZoomFactor) { args.newZoomFactor = maxZoomFactor; } if (args.newZoomFactor <= minZoomFactor) { args.newZoomFactor = minZoomFactor; } } zoomFactorDOM.value = args.newZoomFactor; }); syncDOM(); } function syncDOM() { var limitSwitch = document.getElementById('useLimit'); var maxZoomDOM = document.getElementById('maxZoom'); var minZoomDOM = document.getElementById('minZoom'); var maxZoomParentDOM = maxZoomDOM.parentNode; var minZoomParentDOM = minZoomDOM.parentNode; var useLimit = limitSwitch.checked; if (useLimit) { maxZoomParentDOM.classList.remove('hide'); minZoomParentDOM.classList.remove('hide'); } else { maxZoomParentDOM.classList.add('hide'); minZoomParentDOM.classList.add('hide'); } }
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.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 class="spread-container"> <div id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> </div> <div class="options-container"> <div class="option-row"> <label>Slide to zoom active sheet:</label> <div class="input"> <label class="inline-label">0.25</label> <input id="zoomFactor" type="range" name="points" min="0.25" max="4" value="1" step="0.01"/> <label class="inline-label">4</label> </div> </div> <div class="option-row"> <input id="useLimit" type="checkbox" /> <label for="useLimit" class="inline-label">Limit the zoom factor</label> </div> <div class="option-row"> <label for="maxZoom">The max zoom factor:</label> <input id="maxZoom" type="number" min="0.25" max="4" value="4" step="0.1" /> </div> <div class="option-row"> <label for="minZoom">The min zoom factor:</label> <input id="minZoom" type="number" min="0.25" max="4" value="0.25" step="0.1" /> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .spread-container { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 30px); } #statusBar { width: 100%; height: 30px; } .inline-label { display: inline-block; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input[type=button] { margin-top: 6px; display: block; padding: 4px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .hide { display: none !important; } .inputbox input { display: inline-block; }