Shape Hyperlink

SpreadJS allows you to add hyperlinks to shapes, connector shapes, or group shapes. The hyperlink can be a website URL, email address, or a SpreadJS sheet/cell reference making it easy to navigate to most any location.

You can add hyperlink to shape, line or group shape, tooltip and hyperlink target also support. You can add hyperlink to shape, line or group shape using the following code:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var sheet1 = spread.getSheet(0); var sheet2 = spread.getSheet(1); var sheet3 = spread.getSheet(2); var sheet4 = spread.getSheet(3); var sheet5 = spread.getSheet(4); sheet1.fromJSON(shape_hyperlink_data_sheet1); sheet2.fromJSON(shape_hyperlink_data_sheet2); sheet3.fromJSON(shape_hyperlink_data_sheet3); sheet4.fromJSON(shape_hyperlink_data_sheet4); sheet5.fromJSON(shape_hyperlink_data_sheet5); initSheet1(sheet1); initSheet2(sheet2); initSheet3(sheet3); initSheet4(sheet4); initSheet5(sheet5); spread.resumePaint(); } function initSheet1(sheet) { window.rightArrow1 = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 133, 143, 35); applyUsageShapeStyle(rightArrow1); rightArrow1.hyperlink({ url: "sjs://'Sheet Location'!A1", target: 0, tooltip: "goes to 'Sheet Locaton'!A1" }); window.rightArrow2 = sheet.shapes.add("rightArrow2", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 193, 143, 35); applyUsageShapeStyle(rightArrow2); rightArrow2.hyperlink({ url: "sjs://'Email Address'!A1", target: 0, tooltip: "goes to 'Email Address'!A1" }); window.rightArrow3 = sheet.shapes.add("rightArrow3", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 254, 143, 35); applyUsageShapeStyle(rightArrow3); rightArrow3.hyperlink({ url: "sjs://'Access URL'!A1", target: 0, tooltip: "goes to 'Access URL'!A1" }); window.rightArrow4 = sheet.shapes.add("rightArrow4", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 314, 143, 35); applyUsageShapeStyle(rightArrow4); rightArrow4.hyperlink({ url: "sjs://'Custom Command'!A1", target: 0, tooltip: "goes to 'Custom Command'!A1" }); } function initSheet2(sheet) { backToFirstPage(sheet); } function initSheet3(sheet) { backToFirstPage(sheet); window.rect1 = sheet.shapes.add("rectangle1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 175, 327, 268, 35); var email = 'JoneBarkley@example.com'; applyLinkageShapeStyle(rect1, email); rect1.hyperlink({ url: email, target: 0 }); } function initSheet4(sheet) { backToFirstPage(sheet); window.rect2 = sheet.shapes.add("rectangle2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 209, 327, 268, 35); applyLinkageShapeStyle(rect2, 'www.spreadjs.com'); rect2.hyperlink({ url: "http://developer.mescius.com", target: 0, tooltip: "goes to SpreadJS" }); } function initSheet5(sheet) { backToFirstPage(sheet); window.rect3 = sheet.shapes.add("rectangle3", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 261, 188, 280, 140); applyTimerShapeStyle(rect3, 'Click here to start a timer'); var stopWatch = new Stopwatch(rect3); rect3.hyperlink({ command: function () { if (!stopWatch.started) { stopWatch.start(); } else { stopWatch.stop(); } } }); } function backToFirstPage(sheet) { window.leftArrow = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 525, 410, 189, 35); applyUsageShapeStyle(leftArrow, 'Back To First Page'); leftArrow.hyperlink({ url: "sjs://'Shape Hyperlink'!A1", target: 0, tooltip: "goes to 'Shape Hyperlink'!A1" }); } function applyUsageShapeStyle(shape, text) { shape.adjustments([0.38, 0.36, 0.52, 0.8]); shape.text(text || 'Check Usage'); var style = shape.style(); style.fill.type = 0; style.line.color = "rgb(11,116,77)"; style.textEffect.color = "rgb(11,116,77)"; style.textFrame.vAlign = 1; shape.style(style); } function applyLinkageShapeStyle(shape, text) { shape.text(text); var style = shape.style(); style.fill.type = 0; style.line.transparency = 1; style.textEffect.color = "rgb(5,99,193)"; style.textFrame.vAlign = 1; style.textEffect.font = "20px Calibri" shape.style(style); } function applyTimerShapeStyle(shape, text) { shape.text(text); var style = shape.style(); style.fill.type = 0; style.line.color = "rgb(11,116,77)"; style.textEffect.color = "rgb(11,116,77)"; style.textFrame.hAlign = 1; style.textFrame.vAlign = 1; style.textEffect.font = "22px Calibri" shape.style(style); } var Stopwatch = function (shape) { let interval, ms, sec, min, _started, startTime, endTime; reset(); function reset() { ms = 0; sec = 0; min = 0; shape.text('Click here to start a timer\r\n00 : 00 : 000'); } function start() { this.started = _started = !_started; startTime = new Date(); if (!interval) { interval = setInterval(update, 10); } } function stop() { this.started = _started = !_started; if (interval) { clearInterval(interval); interval = null; var text = shape.text() shape.text(text.replace('Click again to stop', 'Click to restart again')); ms = 0; sec = 0; min = 0; } } function update() { endTime = new Date(); var s = endTime - startTime; ms = s % 1000; s = (s - ms) / 1000; sec = s % 60; s = (s - sec) / 60; min = s % 60; let milli = (Array(3).join('0') + ms).slice(-3); let seconds = sec < 10 ? '0' + sec : sec; let minute = min < 10 ? '0' + min : min; let timer = minute + " : " + seconds + " : " + milli; shape.text(timer + '\r\nClick again to stop'); } this.start = start; this.stop = stop; this.started = _started; }
<!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$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/shape-hyperlink-data.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> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }