# 범위를 HTML로 내보내기
## Content
셀 범위 또는 전체 워크시트를 [CellRange](/spreadjs/api/v19/classes/GC.Spread.Sheets.CellRange) 클래스의 [toHTML](/spreadjs/api/v19/classes/GC.Spread.Sheets.CellRange#tohtml) 메서드를 사용하여 HTML 문자열로 내보낼 수 있습니다.
**toHTML** 메서드는 `includeStyle`과 `headerOptions` 두 개의 매개변수를 제공합니다.
* `includeStyle` 매개변수는 스타일과 스팬을 포함할지 여부를 나타내며 기본값은 true입니다.
* `headerOptions` 매개변수는 셀 범위가 뷰포트 영역에서 전체 행 또는 전체 열일 때 행 또는 열 헤더를 포함할지 여부를 나타냅니다.
[HeaderOptions](/spreadjs/api/v19/enums/GC.Spread.Sheets.HeaderOptions) 열거형은 다음과 같이 4가지 옵션을 가집니다:
* `noHeaders`: 기본값입니다. HTML로 범위 데이터를 내보낼 때 열 및 행 헤더를 제거합니다.
* `rowHeaders`: HTML로 범위 데이터를 내보낼 때 지정된 행 헤더를 포함합니다.
* `columnHeaders`: HTML로 범위 데이터를 내보낼 때 지정된 열 헤더를 포함합니다.
* `allHeaders`: HTML로 범위 데이터를 내보낼 때 지정된 행과 열 헤더 모두를 포함합니다.
`includeStyles` 매개변수를 사용하여 범위를 HTML 문자열로 내보낼 때 셀 스타일을 포함할지 여부를 지정할 수 있습니다. 이 매개변수의 기본값은 true입니다.
다음은 범위를 HTML로 내보낼 때 지원되는 기능입니다.
* 셀 텍스트
* 셀 병합(span)
* backColor, foreColor, font, vAlign, hAlign, borderLeft, borderRight, borderTop, borderBottom, textDecoration 등의 셀 스타일 설정
* 눈금선
* 행 높이 / 열 너비
다음은 범위를 HTML로 내보낼 때 지원되지 않는 기능입니다.
* textIndent, wordWrap, showEllipsis, shrinkToFit, backgroundImage, cellType, watermark, diagonalDown, diagonalUp, isVerticalText, cellButtons, dropDowns, textOrientation 등과 같은 셀 스타일 속성
* 확대/축소(Zoom)
* 스크롤바
* 탭스트립(TabStrip)
* 자동 병합(AutoMerge)
* 바코드
* 차트
* 메모
* 데이터 바 및 아이콘 세트
* 필터
* 그림 및 사용자 정의 움직이는 객체
* 수식 텍스트박스
* 그룹
* 하이퍼링크
* 개요 열(OutlineColumn)
* 피벗 테이블
* 도형(Shape)
* 슬라이서(Slicer)
* 스파크라인(Sparkline)
* 상태 표시줄(Status bar)
* 테이블
* 유효성 검사(Validation)
## 범위를 HTML로 내보내기
**toHTML** 메서드를 사용하여 선택한 범위를 런타임 및 코드에서 HTML 문자열로 내보낼 수 있습니다.
런타임에서 뷰포트 영역의 선택한 범위를 HTML 문자열로 내보낼 때 **toHTML** 메서드를 사용할 수 있습니다. 다음 예제는 런타임에 선택한 셀 범위를 HTML로 내보냅니다.
다음 코드 샘플은 런타임에 뷰포트 영역의 선택된 범위를 HTML 문자열로 내보냅니다.
```JavaScript
// 선택된 뷰포트 영역 범위에서 Html 콘텐츠를 htmlContainer에 가져옴
var r, c, rc, cc;
// 선택 범위 획득
var selectedRanges = activeSheet.getSelections();
r = selectedRanges[0].row;
rc = selectedRanges[0].rowCount;
c = selectedRanges[0].col;
cc = selectedRanges[0].colCount;
var html = activeSheet.getRange(r, c, rc, cc).toHtml();
document.getElementById("htmlContainer").innerHTML = html;
```
또한 런타임이 아닌 백엔드에서 코드를 사용하여 뷰포트 영역의 선택한 범위를 HTML 문자열로 내보낼 수 있습니다.
다음 코드는 워크시트의 특정 셀 범위 [A1:B8]를 HTML 문자열로 내보냅니다.
```JavaScript
// 뷰포트 영역의 "A1:B8" 범위에서 Html 콘텐츠를 htmlContainer에 가져옴
var html = activeSheet.getRange("A1:B8").toHtml();
document.getElementById("htmlContainer").innerHTML = html;
```
## 전체 워크시트를 HTML로 내보내기
**toHTML** 메서드를 사용하여 전체 워크시트를 HTML 문자열로 내보낼 수 있습니다. 다음 예제는 여러 국가의 다양한 도시와 주에서 제품 판매 정보를 포함하는 전체 워크시트를 내보냅니다.
다음 코드는 전체 워크시트를 HTML 문자열로 내보냅니다.
```JavaScript
// 데이터가 있는 뷰포트 영역에서 Html 콘텐츠를 htmlContainer에 가져옴
var html = activeSheet.getRange(-1, -1, -1, -1).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders);
document.getElementById("htmlContainer").innerHTML = html;
```