JavaScript 스프레드시트에서 Rich Text 형식 사용
페이지 정보
작성자 GrapeCity 작성일 2018-11-13 00:00 조회 3,221회 댓글 0건본문
첨부파일
관련링크
이전 버전에서는 SpreadJS의 Rich 텍스트는 HTML 사용해서만 적용이 가능했습니다. 버전 SpreadJS V12이후 부터는, 개발자는 SpreadJS에 Rich 텍스트 기능을 응용 프로그램에 추가할 수 있으며, 더욱이 사용자에게 편집기를 제공 할 수 있습니다. 이 튜토리얼에서는 Rich 텍스트를 사용할 수 있는 몇 가지 방법을 살펴 보겠습니다.
SpreadJS 12에서 JavaScript 스프레드 시트 설정
스크립트와 CSS 참조를 추가하고 Spread 인스턴스를 초기화하는 것으로 시작하겠습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SJS Rich Text Examples</title>
<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.12.0.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.12.0.0.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();
}
</script>
</head>
<body>
<div id="spreadSheet" style="width: 825px; height: 800px; border: 1px solid gray"></div>
</body>
</html>
SpreadJS의 서식있는 텍스트의 기초
서식있는 텍스트 코드의 기본 구조를 살펴 보겠습니다.
var richTextVariable = {
richText: [
{
style: {
font: "font type here",
(other style properties...)
},
text: "richtext text here"
}
]
}
텍스트는 서식(Formatting)에 따라 서로 다른 부분으로 구분되며, 본질적으로 문자열의 연결입니다. 모든 텍스트는 하나의 변수로 결합된 다음에 셀에 적용됩니다.
sheet.setValue(0, 0, richTextVariable, GC.Spread.Sheets.SheetArea.viewport);
또한 셀에서 리치(Rich) 텍스트 변수를 설정할 때, 인라인으로 변수를 정의 할 수 있습니다.
sheet.setValue(0, 0, { richText: [{style:{font: '20px Arial'}, text: 'Test'}]}, GC.Spread.Sheets.SheetArea.viewport);
서식있는 텍스트 형식의 첨자 및 위첨자
많은 SpreadJS 사용자는 스프레드 시트에서 과학 및 수학 공식에 의존하므로, 아래 첨자 및 위 첨자 기능은 SpreadJS 12부터 적용된 유용한 추가 기능입니다. 위 첨자 및 아래 첨자를 사용하려면 서식있는 텍스트 코드에서 "vertAlign"스타일 속성을 다음과 같이 설정하면됩니다. 정의 :
- 1 = 위첨자
- 2 = 아래 첨자
이 예제에서는 과학적 표기법으로 위 첨자를 사용합니다.
var scientificNotation = {
richText: [
{
style: {
font: "24px Calibri"
},
text: "2.13"
},
{
style: {
font: "24px Calibri"
},
text: " x "
},
{
style: {
font: "24px Calibri"
},
text: "10"
},
{
style: {
font: "24px Calibri",
vertAlign: 1
},
text: "3"
},
{
style: {
font: "24px Calibri"
},
text: " = "
},
{
style: {
font: "24px Calibri"
},
text: "2130"
}
]
};
sheet.setValue(0, 0, { richText: [{style:{font: 'bold 20px Arial'}, text: 'Scientific Notation'}]}, GC.Spread.Sheets.SheetArea.viewport);
sheet.setValue(0, 1, scientificNotation, GC.Spread.Sheets.SheetArea.viewport);
이 코드는 과학적 표기법을 사용하여 서식이 지정된 셀을 생성합니다.
스프레드 시트 셀 내에 굵게 및 기울임 꼴 추가
텍스트의 글꼴을 설정할 때, 굵게 및 기울임 꼴과 같은 특정 활자체 강조를 설정할 수도 있습니다. 이를 보여주기 위해 굵은 수학 기호와 기울임 꼴 변수를 사용하여 재무 방정식을 만들 수 있습니다.
var financialEquation = {
richText: [
{
style: {
font: "italic 24px Calibri"
},
text: "A"
},
{
style: {
font: "bold 24px Calibri"
},
text: " = "
},
{
style: {
font: "italic 24px Calibri"
},
text: "P"
},
{
style: {
font: "bold 24px Calibri"
},
text: "(1 + "
},
{
style: {
font: "italic 24px Calibri"
},
text: "r"
},
{
style: {
font: "bold 24px Calibri"
},
text: "/"
},
{
style: {
font: "italic 24px Calibri"
},
text: "n"
},
{
style: {
font: "bold 24px Calibri"
},
text: ")"
},
{
style: {
font: "italic 24px Calibri",
vertAlign: 1
},
text: "nt"
}
]
};
sheet.setValue(1, 0, { richText: [{style:{font: 'bold 20px Arial'}, text: 'Financial Equation'}]}, GC.Spread.Sheets.SheetArea.viewport);
sheet.setValue(1, 1, financialEquation, GC.Spread.Sheets.SheetArea.viewport);
결과적으로 다음과 같은 서식있는 텍스트가 생성됩니다.
단일 스프레드 시트 셀에 여러 색상 추가
서식있는 텍스트는 셀의 텍스트 부분마다 다른 색상을 제공합니다. 서식있는 텍스트 정의의 "foreColor"스타일 속성을 통해 설정할 수 있습니다. 이것을 보여주기 위해, 우리는 다른 원소에 대해 다른 색으로 화학 방정식을 구현할 수 있습니다.
var chemistryEquation = {
richText: [
{
style: {
font: "24px Calibri",
foreColor: "rgb(0, 0, 153)"
},
text: "C"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "3"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(255, 0, 0)"
},
text: "H"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "8"
},
{
style: {
font: "24px Calibri"
},
text: "+"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(0, 102, 0)"
},
text: "O"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "bold 24px Calibri"
},
text: "→"
},
{
style: {
font: "24px Calibri"
},
text: "4"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(255, 0, 0)"
},
text: "H"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(0, 102, 0)"
},
text: "O"
},
{
style: {
font: "24px Calibri"
},
text: "+3"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(0, 0, 153)"
},
text: "C"
},
{
style: {
font: "24px Calibri",
foreColor: "rgb(0, 102, 0)"
},
text: "O"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "2"
}
]
};
sheet.setValue(2, 0, { richText: [{style:{font: 'bold 20px Arial'}, text: 'Chemistry Equation'}]}, GC.Spread.Sheets.SheetArea.viewport);
sheet.setValue(2, 1, chemistryEquation, GC.Spread.Sheets.SheetArea.viewport);
코드가 렌더링되는 방법은 다음과 같습니다.
단일 셀에 다른 글꼴 크기 및 단일 글꼴 추가
SpreadJS의 서식있는 텍스트는 단일 셀에서 서로 다른 글꼴 크기와 기호를 결합하여 지원합니다. 리치 텍스트 코드의 font 속성에서 글꼴 크기를 개별적으로 설정할 수 있습니다. 이를 보여주기 위해 아래와 같은 수학 방정식을 만들 수 있습니다.
var scientificEquation = {
richText: [
{
style: {
font: "28px Times New Roman"
},
text: "["
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "iћA"
},
{
style: {
font: "italic 24px Times New Roman",
vertAlign: 1
},
text: "μ"
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "γ"
},
{
style: {
font: "italic 24px Times New Roman",
vertAlign: 1
},
text: "μ"
},
{
style: {
font: "italic 24px Times New Roman",
vertAlign: 2
},
text: "(a)"
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "∂"
},
{
style: {
font: "italic 24px Times New Roman",
vertAlign: 2
},
text: "μ"
},
{
style: {
font: "24px Times New Roman"
},
text: " - "
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "m"
},
{
style: {
font: "24px Calibri",
vertAlign: 2
},
text: "0"
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "c"
},
{
style: {
font: "28px Times New Roman"
},
text: "]"
},
{
style: {
font: "italic 24px Times New Roman"
},
text: "ψ"
},
{
style: {
font: "24px Times New Roman"
},
text: " = 0"
}
]
};
sheet.setValue(3, 0, { richText: [{style:{font: 'bold 20px Arial'}, text: 'Scientific Equation'}]}, GC.Spread.Sheets.SheetArea.viewport);
sheet.setValue(3, 1, scientificEquation, GC.Spread.Sheets.SheetArea.viewport);
다음은 SpreadJS에서 Rich Text로 수행 할 수있는 작업의 몇 가지 예일 뿐이며 더 많은 기능을 추가하기 위해 노력하고 있습니다. 외부 종속성없이 SpreadJS RichText를 사용하면 모든 형식의 텍스트를 하나의 셀에 결합할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.