! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

JavaScript 스프레드시트에서 Rich Text 형식 사용 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

JavaScript 스프레드시트에서 Rich Text 형식 사용

페이지 정보

작성자 GrapeCity 작성일 2018-11-13 00:00 조회 3,143회 댓글 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를 사용하면 모든 형식의 텍스트를 하나의 셀에 결합할 수 있습니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.