다른 파일이나 웹 페이지의 관련 정보에 빠르게 액세스하려면 워크시트 셀에 하이퍼링크를 삽입하십시오.
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로 설정하세요.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import GC from '@mescius/spread-sheets';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
autoGenerateColumns = false;
dataSource: any[];
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread
spread.suspendPaint();
let sheet = spread.getActiveSheet();
sheet.setText(1, 1, 'SpreadJS Demo Link');
sheet.setText(2, 1, 'https://developer.mescius.com/spreadjs/demos');
let 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');
let 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');
let 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');
let 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');
let hyperlinkWithoutUnderline = {};
hyperlinkWithoutUnderline.url = 'https://developer.mescius.com/spreadjs/demos';
hyperlinkWithoutUnderline.tooltip = 'SpreadJS Demos';
hyperlinkWithoutUnderline.drawUnderline = false;
sheet.setHyperlink(18, 1, hyperlinkWithoutUnderline);
spread.resumePaint();
}
setHyperlinkButtonClicked($event: any) {
this.spread.suspendPaint();
let hyperlink = {};
let sheet = this.spread.sheets[0];
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);
sheet.setValue(row, col, hyperlink.tooltip);
this.spread.resumePaint();
}
allowAutoCreateHyperlink($event: any) {
this.spread.suspendPaint();
this.spread.options.allowAutoCreateHyperlink = $event.target.checked;
this.spread.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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$/ko/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/ko/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/ko/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/ko/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet [autoGenerateColumns]='autoGenerateColumns'>
</gc-worksheet>
</gc-spread-sheets>
<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://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" (click)="setHyperlinkButtonClicked($event)">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" (change)="allowAutoCreateHyperlink($event)" />
</div>
</div>
</div>
</div>
.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: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
