고급기능 SpreadJS에 글꼴(폰트) 추가/설정 방법
페이지 정보
작성자 GCK루카스 작성일 2022-06-29 09:15 조회 1,082회 댓글 2건본문
관련링크
이번 글에서는 SpreadJS에서 사용되는 대표적인 글꼴 관련 설정 방법 네 가지를 소개해 드리려고 합니다.
글꼴과 관련된 궁금증을 가지고 계시다면 이번 글을 확인해 보세요!
- 원하는 위치에 글꼴 설정하기
- SpreadJS의 테마 글꼴 설정하기
- PDF 내보내기 시 글꼴 설정하기
- 글꼴 리스트에 외부 글꼴 추가하기 (Designer Component)
※ 일반적인 웹 폰트 설정 방식으로 SpreadJS에서 사용이 가능합니다.
1. 원하는 위치에 글꼴 설정하기
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(); }
@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; }
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(); }
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(); }
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를 다운로드하여 직접 테스트해보세요!