Overview

SpreadJS supports Excel-like hyperlinks, which give the user the ability to quickly open up links from inside worksheet cells with simple JavaScript API.

For quick access to related information in another file or on a web page, you can insert a hyperlink in a worksheet cell. You can set hyperlink by using setHyperlink, for example: If you want to get the hyperlink data of a cell, you can use getHyperlink, for example: The hyperlink has these keys: Key Value Type Explain url string Indicates the location that the hyperlink points to. Our hyperlink supports many protocols, such as: http/https/ftp/file/mailto... Besides, we also support url start with "sjs://" which referer to a worksheet location. tooltip string Indicates the tooltip message which shows when hovering over the cell with a hyperlink. linkColor string Indicates the foreColor before the link visited. Default is #0066cc. visitedLinkColor string Indicates the foreColor after the link visited. Default is #3399ff. target number Indicates the way that the user opens the hyperlinked document. Default is 0 /* blank */. drawUnderline boolean Indicates whether to draw the underline for the cell have hyperlink. Default is true. command string | function Indicates the behavior when clicking the hyperlink rather than default opening url. If you type a link to a cell, we also support auto create the hyperlink for you. There is a option allowAutoCreateHyperlink in spread options. We support to auto create hyperlink by default. If you don't like this, you can set allowAutoCreateHyperlink to false.
window.onload = initFunction; function initFunction() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); var sheet = spread.getActiveSheet(); spread.suspendPaint(); sheet.setText(1, 1, 'SpreadJS Demo Link'); sheet.setText(2, 1, 'https://developer.mescius.com/spreadjs/demos'); var hyperlinkForUrl = {}; hyperlinkForUrl.url = 'https://developer.mescius.com/spreadjs/demos'; sheet.setHyperlink(2, 1, hyperlinkForUrl); sheet.setText(5, 1, 'Link with tooltip'); sheet.setText(6, 1, 'https://developer.mescius.com/spreadjs/demos'); var hyperlinkForTooltip = {}; hyperlinkForTooltip.url = 'https://developer.mescius.com/spreadjs/demos'; hyperlinkForTooltip.tooltip = 'SpreadJS Demos'; sheet.setHyperlink(6, 1, hyperlinkForTooltip); sheet.setText(9, 1, 'Change link foreColor'); sheet.setText(10, 1, 'https://developer.mescius.com/spreadjs/demos'); var hyperlinkForForeColor = {}; hyperlinkForForeColor.url = 'https://developer.mescius.com/spreadjs/demos'; hyperlinkForForeColor.tooltip = 'SpreadJS Demos'; hyperlinkForForeColor.linkColor = 'red'; sheet.setHyperlink(10, 1, hyperlinkForForeColor); sheet.setText(13, 1, 'Change link visited color'); sheet.setText(14, 1, 'https://developer.mescius.com/spreadjs/demos'); var hyperlinkForVisitedColor = {}; hyperlinkForVisitedColor.url = 'https://developer.mescius.com/spreadjs/demos'; hyperlinkForVisitedColor.tooltip = 'SpreadJS Demos'; hyperlinkForVisitedColor.visitedLinkColor = 'green'; sheet.setHyperlink(14, 1, hyperlinkForVisitedColor); sheet.setText(17, 1, 'Link without underline'); sheet.setText(18, 1, 'https://developer.mescius.com/spreadjs/demos'); var hyperlinkWithoutUnderline = {}; hyperlinkWithoutUnderline.url = 'https://developer.mescius.com/spreadjs/demos'; hyperlinkWithoutUnderline.tooltip = 'SpreadJS Demos'; hyperlinkWithoutUnderline.drawUnderline = false; sheet.setHyperlink(18, 1, hyperlinkWithoutUnderline); var hyperlinkButtonElement = document.getElementById('setHyperlinkButton'); hyperlinkButtonElement.onclick = function (e) { var hyperlink = {}; hyperlink.url = document.getElementById('hyperlinkURL').value; hyperlink.tooltip = document.getElementById('tooltip').value; hyperlink.linkColor = document.getElementById('linkColor').value; if (hyperlink.linkColor === "") { hyperlink.linkColor = undefined; } hyperlink.visitedLinkColor = document.getElementById('visitedLinkColor').value; if (hyperlink.visitedLinkColor === "") { hyperlink.visitedLinkColor = undefined; } hyperlink.target = document.getElementById('hyperlinkTarget').value; hyperlink.drawUnderline = document.getElementById('drawUnderline').checked; var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.setHyperlink(row, col, hyperlink); sheet.setValue(row, col, hyperlink.tooltip); }; var allowAutoCreateHyperlinkElement = document.getElementById('allowAutoCreateHyperlink'); allowAutoCreateHyperlinkElement.checked = true; allowAutoCreateHyperlinkElement.onchange = function (e) { spread.options.allowAutoCreateHyperlink = e.target.checked; }; spread.resumePaint(); }
<!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/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"> <strong class="sp-demo-HeaderTitle">Settings:</strong> <P style="padding:2px 10px">Set the hyperlink data for a cell:</P> <fieldset> <div id="settingsDiv" style="margin-top: 10px"> <div class="option-row"> <label for="hyperlinkURL">URL:</label> <input type="text" id="hyperlinkURL" placeholder="https://developer.mescius.com/"> </div> <div class="option-row"> <label for="tooltip">Tooltip:</label> <input type="text" id="tooltip" placeholder="MESCIUS"> </div> <div class="option-row"> <label for="linkColor">Link Color:</label> <input type="text" id="linkColor" placeholder="#0066cc"> </div> <div class="option-row"> <label for="visitedLinkColor">Visited Link Color:</label> <input type="text" id="visitedLinkColor" placeholder="#3399ff"> </div> <div class="option-row"> <label for="hyperlinkTarget">Target:</label> <select id="hyperlinkTarget" name="hyperlinkTarget"> <option value="0">blank</option> <option value="1">self</option> <option value="2">parent</option> <option value="3">top</option> </select> </div> <div class="option-row"> <label for="drawUnderline">Draw Underline:</label> <input type="checkbox" id="drawUnderline"> </div> <div class="option-row"> <button id="setHyperlinkButton">Set Hyperlink</button> </div> </div> </fieldset> <div style="margin-top: 10px"> <div class="option-row"> <label for="allowAutoCreateHyperlink">Allow auto create hyperlink:</label> <input id="allowAutoCreateHyperlink" type="checkbox"> </div> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .options-container legend { text-align: center; } .option-row { font-size: 14px; padding: 5px; } input { display:block; width: 100%; margin: 8px 0; box-sizing: border-box; } label, input { padding: 4px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #drawUnderline { display: inline-block; width: 30px; } #drawUnderlineLabel { display: inline-block; } #allowAutoCreateHyperlink { display: inline-block; width: 30px; } #setHyperlinkButton { font-weight: bold; background-color: #ecf3ff; width: 200px; height: 35px; border-radius: 4px; border-color: #0b93d5; border-width: thin; }