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 hover over the cell with hyperlink. linkColor string Indicates the fore color before the link visited. Default is #0066cc. visitedLinkColor string Indicates the fore color after the link visited. Default is #3399ff. target number Indicates the way that user open the hyperlinked document. Default is 0 /* blank */. drawUnderline boolean Indicates whether draw the underline for the cell have hyperlink. Default is true. command string | function Indicates the behaviour 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.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@grapecity/spread-sheets'; import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react'; import './styles.css'; const Component = React.Component; const GCsheets = GC.Spread.Sheets; function _getElementById(id) { return document.getElementById(id); } class App extends Component { constructor(props) { super(props); this.spread = null; this.autoGenerateColumns = true; } render() { return( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}> <Worksheet autoGenerateColumns={this.autoGenerateColumns}> </Worksheet> </SpreadSheets> </div> <Panel allowAutoCreateHyperlink={(e)=>{this.allowAutoCreateHyperlink(e)}} setHyperlinkButtonClicked={(e)=>{this.setHyperlinkButtonClicked(e)}} /> </div> ); } initSpread(spread) { this.spread = spread; spread.suspendPaint(); let sheet = spread.getActiveSheet(); this.sheet = sheet; sheet.setText(1, 1, 'SpreadJS Demo Link'); sheet.setText(2, 1, 'https://www.grapecity.com/spreadjs/demos'); let hyperlinkForUrl = {}; hyperlinkForUrl.url = 'https://www.grapecity.com/spreadjs/demos'; sheet.setHyperlink(2, 1, hyperlinkForUrl); sheet.setText(5, 1, 'Link with tooltip'); sheet.setText(6, 1, 'https://www.grapecity.com/spreadjs/demos'); let hyperlinkForTooltip = {}; hyperlinkForTooltip.url = 'https://www.grapecity.com/spreadjs/demos'; hyperlinkForTooltip.tooltip = 'GrapeCity SpreadJS Demos'; sheet.setHyperlink(6, 1, hyperlinkForTooltip); sheet.setText(9, 1, 'Change link foreColor'); sheet.setText(10, 1, 'https://www.grapecity.com/spreadjs/demos'); let hyperlinkForForeColor = {}; hyperlinkForForeColor.url = 'https://www.grapecity.com/spreadjs/demos'; hyperlinkForForeColor.tooltip = 'GrapeCity SpreadJS Demos'; hyperlinkForForeColor.linkColor = 'red'; sheet.setHyperlink(10, 1, hyperlinkForForeColor); sheet.setText(13, 1, 'Change link visited color'); sheet.setText(14, 1, 'https://www.grapecity.com/spreadjs/demos'); let hyperlinkForVisitedColor = {}; hyperlinkForVisitedColor.url = 'https://www.grapecity.com/spreadjs/demos'; hyperlinkForVisitedColor.tooltip = 'GrapeCity SpreadJS Demos'; hyperlinkForVisitedColor.visitedLinkColor = 'green'; sheet.setHyperlink(14, 1, hyperlinkForVisitedColor); sheet.setText(17, 1, 'Link without underline'); sheet.setText(18, 1, 'https://www.grapecity.com/spreadjs/demos'); let hyperlinkWithoutUnderline = {}; hyperlinkWithoutUnderline.url = 'https://www.grapecity.com/spreadjs/demos'; hyperlinkWithoutUnderline.tooltip = 'GrapeCity SpreadJS Demos'; hyperlinkWithoutUnderline.drawUnderline = false; sheet.setHyperlink(18, 1, hyperlinkWithoutUnderline); spread.resumePaint(); } setHyperlinkButtonClicked(e) { this.spread.suspendPaint(); let hyperlink = {}; let sheet = this.sheet; 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; let row = sheet.getActiveRowIndex(); let col = sheet.getActiveColumnIndex(); sheet.setHyperlink(row, col, hyperlink); this.spread.resumePaint(); } allowAutoCreateHyperlink(e) { this.spread.suspendPaint(); this.spread.options.allowAutoCreateHyperlink = e.target.checked; this.spread.resumePaint(); } componentDidMount() { let allowAutoCreateHyperlinkElement = document.getElementById('allowAutoCreateHyperlink'); allowAutoCreateHyperlinkElement.checked = true; } } class Panel extends Component{ constructor(props){ super(props); } render(){ return( <div class="options-container"> <strong class="sp-demo-HeaderTitle">Settings:</strong> <p id="settingString">Set the hyperlink data for a cell:</p> <fieldset> <div id="settingsDiv"> <div class="option-row"> <label for="hyperlinkURL">URL:</label> <input type="text" id="hyperlinkURL" placeholder="https://www.grapecity.com/" /> </div> <div class="option-row"> <label for="tooltip">Tooltip:</label> <input type="text" id="tooltip" placeholder="GrapeCity" /> </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" onClick={(e)=>{this.props.setHyperlinkButtonClicked(e)}}>Set Hyperlink</button> </div> </div> </fieldset> <div id="allowAutoCreateHyperlinkDiv"> <div class="option-row"> <label for="allowAutoCreateHyperlink">Allow auto create hyperlink:</label> <input id="allowAutoCreateHyperlink" type="checkbox" onChange={(e)=>{this.props.allowAutoCreateHyperlink(e)}} /> </div> </div> </div> ) } } ReactDOM.render(<App />, _getElementById('app'));
<!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/react/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></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; } #app { height: 100%; } #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; } #settingsDiv { margin-top: "10px" } #settingString { padding:"2px 10px } #allowAutoCreateHyperlinkDiv { margin-top: "10px" }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-react': 'npm:@grapecity/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);