빠른 시작
다음 빠른 시작 섹션에서는 새 스프레드시트와 기존 스프레드시트에서 SpreadJS 디자이너 컴포넌트를 프로젝트에 사용하는 방법을 안내합니다. 자이너 컴포넌트의 최신 스크립트 및 CSS 파일은 여기에서 다운로드할 수 있습니다. 참조 추가에 대한 자세한 내용은 시작하기 주제를 참고하세요.
ChatGPT에게 묻기
참고: 디자이너 컴포넌트는 시트 컴포넌트와 함께만 사용할 수 있습니다. 시트 컴포넌트 사용 방법은 빠른 시작 주제를 참고하세요.
새 스프레드시트와 함께 디자이너 컴포넌트 사용하기
HTML 페이지
다음 단계를 따라 SpreadJS 디자이너 컴포넌트와 새 스프레드시트를 함께 표시하는 HTML 페이지를 만드세요.
‘메모장’ 또는 원하는 코드 편집기를 엽니다.
파일에 다음 HTML 코드를 추가하세요.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> </script> </head> <body> </body> </html>HEAD 요소 태그 안에 다음 SpreadJS CSS 및 JS 파일을 추가하세요.
<!--CSS files--> <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" /> <!--Script files--> <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>피벗 테이블 기능을 사용하려면 다음 추가 스크립트 파일을 포함하세요.
<script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>HEAD 요소 태그 안에 다음 디자이너 컴포넌트의 CSS 및 JS 파일을 추가하세요.
<!--CSS files--> <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" /> <!--Script files--> <script src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>참고: 스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.
또한, 디자이너 컴포넌트 리소스 파일(gс.spread.sheets.designer.resource.ko.x.x.x.min.js, 이 경우)이 gc.spread.sheets.designer.all.x.x.x.min.js보다 항상 먼저 참조되어야 합니다.
BODY 요소에 컨테이너로 사용할 DOM 요소를 포함하세요.
<body> <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div> </body>HEAD 섹션의 script 요소 안에서 디자이너 컴포넌트를 초기화하세요. 초기화 전에 디자이너 컴포넌트와 SpreadJS의 라이선스 키도 설정해야 합니다.
<script> //라이선스 키 설정하기 //GC.Spread.Sheets.Designer.LicenseKey = "XXX"; //GC.Spread.Sheets.LicenseKey = "XXXX"; var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost")); </script>HTML 파일의 전체 코드는 다음과 같습니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <!--CSS 파일--> <!--스프레드시트 CSS 파일--> <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" /> <!--디자이너 컴포넌트 CSS 파일--> <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" /> <!--스크립트 파일--> <!--스프레드시트 JS 파일--> <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script> <!--디자이너 컴포넌트 JS 파일--> <script src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script> <script> window.onload = function () { //라이선스 키 설정하기 //GC.Spread.Sheets.Designer.LicenseKey = "XXX"; //GC.Spread.Sheets.LicenseKey = "XXXX"; var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost")); } </script> </head> <body> <!--DOM element--> <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div> </body> </html>HTML 파일로 저장하세요. 예를 들어, ‘index.html’로 저장하면 됩니다.
HTML 파일을 저장한 동일한 위치에 새 폴더를 만들고, 3단계와 4단계에서 언급한 스크립트 및 CSS 파일을 해당 폴더에 추가하세요.
브라우저에서 HTML 파일을 열어 새 스프레드시트와 함께 디자이너 컴포넌트를 확인하세요.
ASP.NET 웹 애플리케이션
다음 단계를 따라 새 스프레드시트와 함께 SpreadJS 디자이너 컴포넌트를 표시하는 ASP.NET 웹 애플리케이션을 만드세요.
Visual Studio에서 빈 ASP.NET 웹 애플리케이션을 만드세요.
프로젝트 루트 위치에 ‘scripts’ 폴더를 생성한 후, 다음 스크립트 파일들을 포함하세요:
// SpreadJS 스크립트 파일 gc.spread.sheets.all.x.x.x.min.js gc.spread.sheets.charts.x.x.x.min.js gc.spread.sheets.shapes.x.x.x.min.js gc.spread.sheets.print.x.x.x.min.js gc.spread.sheets.barcode.x.x.x.min.js gc.spread.sheets.pdf.x.x.x.min.js gc.spread.sheets.tablesheet.x.x.x.min.js // SpreadJS 디자이너 컴포넌트 스크립트 파일 gc.spread.sheets.designer.resource.ko.0.0.0.min.js gc.spread.sheets.designer.all.x.x.x.min.js스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.
또한, 디자이너 컴포넌트 리소스 파일(gc.spread.sheets.designer.resource.ko.x.x.x.min.js, 이 경우)은 gc.spread.sheets.designer.all.x.x.x.min.js보다 항상 먼저 참조되어야 합니다.
피벗 테이블 기능을 사용하려면 다음 추가 스크립트 파일을 포함하세요.
<script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>내보내기 기능을 추가하려면 다음 추가 스크립트 파일을 포함하세요:
<script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>프로젝트 루트 위치에 ‘css’ 폴더를 생성한 후, 다음 CSS 파일을 포함하세요:
SpreadJS CSS 파일 -
gc.spread.sheets.x.x.x.cssSpreadJS 디자이너 컴포넌트 CSS 파일 -
gc.spread.sheets.designer.x.x.x.min.css
Visual Studio 프로젝트에 HTML 페이지를 추가하세요.
추가한 HTML 페이지의 내용을 다음 코드로 수정하세요:
디자이너 컴포넌트 초기화하기
디자이너 컴포넌트 대상 DOM 요소 생성하기
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <!--CSS 파일--> <!--Spreadsheet CSS file--> <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" /> <!--디자이너 컴포넌트 CSS 파일--> <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" /> <!--스크립트 파일--> <!--스프레드시트 JS 파일--> <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script> <!--디자이너 컴포넌트 JS 파일--> <script src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script> <script> window.onload = function () { //라이선스 키 설정하기 //GC.Spread.Sheets.Designer.LicenseKey = "XXX"; //GC.Spread.Sheets.LicenseKey = "XXXX"; var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost")); } </script> </head> <body> <!--DOM element--> <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div> </body> </html>브라우저에서 HTML 파일을 열어 새 스프레드시트와 함께 디자이너 컴포넌트를 확인하세요.
기존 스프레드시트와 함께 디자이너 컴포넌트 사용하기
디자이너 컴포넌트는 기존 스프레드시트와도 함께 사용할 수 있습니다. 예를 들어, 아래 이미지는 트리맵 차트와 해당 데이터가 포함된 스프레드시트를 보여줍니다.
위 스프레드시트와 함께 디자이너 컴포넌트를 사용하려면, 기존 HTML 파일에 아래 단계를 적용하세요:
디자이너 컴포넌트 스크립트 및 CSS 파일 참조를 포함하세요.
<!--디자이너 컴포넌트 CSS 파일--> <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" /> <!--디자이너 컴포넌트 스크립트 파일--> <script src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js" type="text/javascript"></script> <script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>참고: 앞서 설명한 것처럼 스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.
디자이너 컴포넌트를 초기화할 때 스프레드시트 변수를 매개변수로 전달하세요.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);시트 DOM 요소와 함께 디자이너 컴포넌트의 DOM 요소를 포함하세요.
<div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
아래는 기존 스프레드시트에 데이터를 추가하고 트리맵 차트를 생성한 후, 해당 스프레드시트를 디자이너 컴포넌트와 함께 사용하여 UI 작업을 수행하는 HTML 파일의 전체 코드 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<!--CSS 파일-->
<link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
<!--디자이너 컴포넌트 CSS 파일-->
<link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
<!--스크립트 파일-->
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
<!--디자이너 컴포넌트 JS 파일-->
<script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// 활성 시트 가져오기
var sheet = spread.getSheet(0);
// 열 너비 설정
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(4, 100);
// 데이터 배열 생성
var dataArray =
[
['Region', 'Subregion', 'country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
];
// 배열 설정
sheet.setArray(1, 1, dataArray);
var treemapChart = sheet.charts.add('chart1',
GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
// 디자이너 컴포넌트를 초기화하고, 위에서 생성한 스프레드시트 컴포넌트를 사용하세요.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
});
</script>
</head>
<body>
<div id="ss"></div>
<!--DOM element for designer components-->
<div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>위 코드는 아래와 같은 결과를 생성합니다:
