超链接

SpreadJS支持给形状添加超链接。 这个例子展示了向形状,线条或者组合形状添加超链接。

你可以给形状,线条或者组合形状添加超链接。也支持添加提示以及修改超链接目标。 你可以使用以下代码给形状,线条或者组合形状添加超链接。
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: "https://www.grapecity.com.cn", 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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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; }