고급기능 SpreadJS에 글꼴(폰트) 추가/설정 방법
추천0
페이지 정보
작성자 GCK루카스
작성일 2022-06-29 09:15 조회 1,059회
댓글 2건
본문
관련링크
이번 글에서는 SpreadJS에서 사용되는 대표적인 글꼴 관련 설정 방법 네 가지를 소개해 드리려고 합니다.
글꼴과 관련된 궁금증을 가지고 계시다면 이번 글을 확인해 보세요!
- 원하는 위치에 글꼴 설정하기
- SpreadJS의 테마 글꼴 설정하기
- PDF 내보내기 시 글꼴 설정하기
- 글꼴 리스트에 외부 글꼴 추가하기 (Designer Component)
※ 일반적인 웹 폰트 설정 방식으로 SpreadJS에서 사용이 가능합니다.
1. 원하는 위치에 글꼴 설정하기
GC.Spread.Sheets.Style()을 이용하여 원하는 위치에 글꼴을 설정할 수 있습니다.
PC에 설치되어 있는 글꼴을 사용하실 수도 있고, 웹 폰트를 CSS에 등록하신 후 사용하실 수도 있습니다.
1) PC에 설치되어 있는 글꼴을 사용하는 경우
아래와 같이 fontStyle을 설정한 후 적용할 수 있습니다.
JavaScript
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
var sheet = workbook.getActiveSheet();
var fontStyle = new GC.Spread.Sheets.Style();
fontStyle.font = "9pt 궁서체";
fontStyle.foreColor = "black";
sheet.setStyle(1,1, fontStyle); //적용
sheet.setValue(1,1, "궁서체");
workbook.refresh();
} 2) 웹 폰트를 사용하는 경우
아래와 같이 CSS에 폰트를 등록한 후, 위에서와 같이 글꼴을 적용하여 사용하실 수 있습니다.
CSS
@font-face {
font-family: 'CookieRun';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/CookieRunOTF-Bold00.woff') format('woff');
font-weight: normal;
font-style: normal;
} JavaScript
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
var sheet = workbook.getActiveSheet();
var fontStyle3 = new GC.Spread.Sheets.Style();
fontStyle3.font = "9pt CookieRun";
fontStyle3.foreColor = "black";
sheet.setStyle(1,3, fontStyle3); //적용
sheet.setValue(1,3, "쿠키런");
workbook.refresh();
} 아래 예제는 B2에 궁서체, C2에 바탕, D2에 쿠키런 폰트를 적용하는 코드입니다.
아래에서 결과 화면을 확인하실 수 있습니다.
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:2});
var sheet = workbook.getActiveSheet();
var fontStyle = new GC.Spread.Sheets.Style();
fontStyle.font = "9pt 궁서체";
fontStyle.foreColor = "black";
sheet.setStyle(1,1, fontStyle); //적용
sheet.setValue(1,1, "궁서체");
var fontStyle2 = new GC.Spread.Sheets.Style();
fontStyle2.font = "9pt 바탕";
fontStyle2.foreColor = "black";
sheet.setStyle(1,2, fontStyle2); //적용
sheet.setValue(1,2, "바탕");
var fontStyle3 = new GC.Spread.Sheets.Style();
fontStyle3.font = "9pt CookieRun";
fontStyle3.foreColor = "black";
sheet.setStyle(1,3, fontStyle3); //적용
sheet.setValue(1,3, "쿠키런");
workbook.refresh();
}2. SpreadJS의 테마 글꼴 설정하기
SpreadJS는 엑셀과 마찬가지로 테마 글꼴을 지원합니다.
테마 글꼴이란 처음 문서를 열었을 때 기본으로 지정되어 있는 글꼴을 의미합니다.
테마 글꼴은 제목과 본문으로 나뉘어집니다.
엑셀에서는 아래와 같이 확인할 수 있고, 기본 테마 글꼴은 맑은 고딕으로 설정되어 있습니다.
SpreadJS에서도 테마 글꼴을 설정할 수 있습니다.
SpreadJS의 기본 테마 글꼴은 Calibri이며, 한글 환경에 맞게 맑은 고딕으로 설정하기 위해서는 GC.Spread.Sheets.Theme()를 이용해 테마를 만들고 적용해야 합니다.
function applyKOTheme(spread) {
var theme = new GC.Spread.Sheets.Theme("koCustomTheme", GC.Spread.Sheets.ThemeColors.Office, "맑은 고딕", "맑은 고딕");
if (spread) {
spread.sheets.forEach(function (item) {
item.currentTheme(theme);
});
}
}3. PDF 내보내기 시 글꼴 설정
PDF는 파일 특성 상 영어 외의 문자를 내보내기 하는 경우, 글꼴을 함께 내보내야 깨지지 않습니다.
그렇기 때문에 실제 글꼴 파일(TTF)을 함께 등록하고 내보내야 합니다.
TTF 파일을 base64 형태로 변환하고 PDFFontsManager에 글꼴을 등록합니다.
fetch("https://assets.codepen.io/975719/malgun.ttf")
.then(function(response) {
return response.arrayBuffer();
})
.then(function(arrayBuffer) {
var base64String = _arrayBufferToBase64(arrayBuffer);
var fonts = {
normal: base64String
};
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('malgun', fonts);
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
return fonts.normal;
}
,,,,,,,,,,,,,,,,,,,,
function _arrayBufferToBase64(buffer) {
var binary = "";
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}4. 글꼴 리스트에 외부 글꼴 추가하기 (Designer Component)
디자이너 컴포넌트를 사용할 경우 엑셀처럼 글꼴 리스트에서 글꼴을 선택할 수 있습니다.
이번엔 디자이너 컴포넌트의 글꼴 리스트에 새로운 글꼴을 추가하는 방법을 설명합니다.
디자이너 컴포넌트에 기본으로 포함된 한글 글꼴은 맑은 고딕입니다.
아래 코드를 이용하여 바탕과 궁서체, 쿠키런 글꼴을 추가할 수 있습니다.
일반적인 웹 폰트 설정 방식으로 SpreadJS에서 글꼴 설정이 가능합니다.
var fontFamilyCmd = GC.Spread.Sheets.Designer.getCommand("fontFamily");
var customFont = [
{ value: "바탕", text: "바탕" },
{ value: "궁서체", text: "궁서체" },
{ value: "CookieRun", text: "쿠키런" }
];
fontFamilyCmd.dropdownList = customFont.concat(fontFamilyCmd.dropdownList);
var ribbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
ribbonConfig.commandMap = {
fontFamily: fontFamilyCmd
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), ribbonConfig);지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
강경태님의 댓글
강경태
작성일
GCK루카스님의 댓글의 댓글
GCK루카스
작성일
