Excel과 유사한 하이퍼링크 기능
페이지 정보
작성자 GrapeCity
작성일 2020-05-13 00:00 조회 1,967회
댓글 0건
본문
첨부파일
관련링크
SpreadJS v13.1에는 향상된 하이퍼링크 지원이 포함되어 있습니다. 이전 버전의 SpreadJS에서는 하이퍼링크가 URL 링크만 열고 하이퍼링크를 Excel로 내보낼 수는 없었습니다. 최신 업데이트에서는 이러한 문제와 기타 문제를 해결하였습니다.
Excel 호환성 외에도 다음과 같은 다양한 형식의 하이퍼링크를 만들 수 있는 옵션을 추가하였습니다.
- URL: 현재 웹 브라우저에서 지정된 URL을 엽니다.
- 이메일 주소: 시스템의 기본 메일링 응용 프로그램을 열고 새 메일을 시작합니다.
- 시트 위치: 통합 문서에서 활성 셀을 특정 셀로 이동합니다.
- 사용자 정의 명령: 사용자가 하이퍼링크를 클릭할 때 발생하는 사용자 정의 작업을 구현합니다.
이 포스팅에서는 Excel 파일을 가져와 SpreadJS v13.1로 다양한 유형의 하이퍼링크를 추가해 보겠습니다.
SpreadJS v13 Service Pack 1 새로운 기능 전체 보기
프로젝트 설정: HTML 페이지 만들기
SpreadJS 참조가 포함된 HTML 파일을 만듭니다.
- 폴더에 HTML 파일을 만들고 이 파일에 다음 코드를 추가합니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head
meta charset="utf-8" />
<title>SpreadJS Hyperlinks</title>
<link href=" ./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="
stylesheet" type="text/css" />
<script type="text/javascript" src=" ./node_modules/@grapecity/spread-sheets/dist/gc.spread.all.min.
js"></script>
<script type="text/javascript" src=" ./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js">
</script>
</head>
<body>
<div id="spreadSheet" style="width: 1300px; height: 800px; border: 1px solid gray"></div>
</body>
</html>
SpreadJS NPM 파일 설치
- 명령 프롬프트를 이용하여 프로젝트 폴더로 이동해서 아래와 같이 입력합니다.
npm install @grapecity/spread-sheets @grapecity/spread-sheets-excelio
이 작업을 통해 프로젝트에 최신 SpreadJS 파일이 설치되고 HTML 페이지에서 그러한 참조가 올바르게 작동됩니다.
Excel 템플릿을 SpreadJS로 가져옵니다.
- 간편함을 위해 SpreadJS Designer를 사용해 Excel 템플릿에서 JS 파일을 만들고 이 파일을 데모 zip 파일에 포함하였습니다(이 포스팅 하단에서 확인 가능합니다.).
- 이 파일을 HTML 페이지에 로드하려면 다음 코드를 추가하십시오.
<script type="text/javascript" src="./ExcelTemplate.js"></script>
그리고 스크립트 코드를 추가하여 SpreadJS 인스턴스를 초기화하고 템플릿을 그 안에 로드합니다.
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementByID("spreadSheet"),{ sheetCount: 1});
spread.fromJSON(ExcelTemplate);
var sheet = spread.getActiveSheet();
}
</script>
- 나중에 사용할 특정 시트에 대한 JSON 템플릿을 만듭니다. 이를 가리켜 다음과 같이 "sheetJSONString"이라고 합니다.
var sheetJSONString = JSON.stringify(sheet.toJSON());
HTML 페이지를 설정하였고, SpreadJS에 새로운 하이퍼링크를 추가할 준비를 마쳤습니다.
JavaScript 스프레드시트에 하이퍼링크 추가
URL 하이퍼링크
이 경우 링크가 위 템플릿의 “Employer Website(고용주 웹사이트)” 옆에 있는 셀에 표시되도록 할 것입니다.
- setHyperlink 함수를 사용하고, URL을 추가합니다.
- 셀에 표시되게 하려는 텍스트의 값을 설정합니다.
//URL
sheet.setValue(2, 2, "GrapeCity")
sheet.setHyperlink(2, 2, { url: "https://www.grapecity.com"});
이메일 주소 하이퍼링크
클릭하면 시스템의 기본 메일 응용 프로그램이 열리고 지정된 수신자로 주소가 지정된 이메일의 초안이 작성됩니다.
- 코드는 기본적으로 URL 하이퍼링크와 동일합니다.
//Email Address
sheet.setValue(2, 6, "us.sales@grapecity.com")
sheet.setHyperlink(2, 6, { url: "us.sales@grapecity.com"});
URL 하이퍼링크와 마찬가지로 이메일 값이 이메일 주소와 일치할 필요는 없습니다.
시트 위치 하이퍼링크
통합 문서의 특정 셀과 시트로 자동으로 이동됩니다.
- 동일한 “하이퍼링크 설정” 함수를 사용합니다.
- "url" 속성의 구문을
sjs://<Sheet Name><Cell Reference>로 변경합니다. - 이 링크를 통해 전체 셀로 이동합니다.
//Sheet Location
sheet.setValue(10, 4, "Personal Totals");
sheet.setHyperlink(10, 4, { url: "sjs://Personal Monthly Budget!G62:J67"});
하이퍼링크에 대한 사용자 정의 명령
- 사용자 정의 명령 링크를 Excel로 내보낼 수는 없습니다.
- setHyperlink로 사용자 정의 명령 하이퍼링크를 만듭니다.
- "url" 속성을 지정하는 대신 “명령” 속성을 지정합니다.
- 명령 속성 목록을 보려면 이 링크를 따라가십시오.
사용자 정의 명령 만들기
아래에서는 새로운 사용자 정의 명령에 대한 함수를 만들고 예산 시트를 생성할 것입니다. 이 함수를 통해 다음 작업이 수행됩니다.
- 통합 문서에 예산 시트 추가
- 앞서 정의한 시트 JSON 문자열 가져오기
- 시트 이름 다시 지정
- 하이퍼링크 추가
//Custom Command
sheet.setValue(11, 4, "New Minthly Budget");
sheet.setHyperlink(11, 4, {
command: function (sheet) {
spread.addSheet(spread.sheets.length, new GC.Spread.Sheets.Worksheet ());
var newSheet = spread.getSheet(spread.sheets.length - 1);
newSheet.fromJSON(JSON.parse(sheetJSONString));
newSheet.name("Personal Monthly Budget " + (spread.sheets.length - 1));
spread.setActiveSheetIndex(spread.sheets.length-1);
addHyperlinks(spread, sheetJSONString);
}
});
댓글목록
등록된 댓글이 없습니다.
