다른 파일이나 웹 페이지의 관련 정보에 빠르게 액세스하려면 워크시트 셀에 하이퍼링크를 삽입하십시오.
setHyperlink를 사용하여 하이퍼링크를 설정할 수 있습니다. 예:
셀의 하이퍼링크 데이터를 가져오려면 getHyperlink를 사용하십시오. 예:
하이퍼링크에는 다음과 같은 키가 있습니다.
키
값 형식
설명
url
string
하이퍼링크가 가리키는 위치를 표시한다. 하이퍼링크는 http/https/ftp/file/mailto...와 같은 많은 프로토콜을 지원하며, 또한 워크시트 위치를 참조하는 "sjs://"로 시작하는 URL도 지원합니다.
tooltip
string
하이퍼링크로 셀 위를 가리킬 때 표시되는 툴팁 메시지를 표시합니다.
linkColor
string
링크를 방문하기 전의 글자 색을 표시합니다. 기본은 #0066cc입니다.
visitedLinkColor
string
링크를 방문한 후의 글자 색을 표시합니다. 기본은 #3399ff입니다.
target
number
사용자가 하이퍼링크 문서를 여는 방법을 표시합니다. 기본은 0 /* 공백 */입니다.
drawUnderline
boolean
하이퍼링크가 있는 셀에 밑줄을 그릴 지 여부를 표시합니다. 기본은 true입니다.
command
string | function
기본으로 url을 여는것이 아닌, 하이퍼링크를 클릭할 때의 동작을 나타냅니다.
셀에 대한 링크를 입력하면 하이퍼링크를 자동으로 만들 수도 있습니다.
spread 옵션에 allowAutoCreateHyperlink 옵션이 있습니다.
기본적으로 하이퍼링크를 자동으로 만드는 것을 지원한다.
만약 원하지 않는다면, allowAutoCreateHyperlink을 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 name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/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 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="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">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;
}
