웹 기반의 리포트(Reporting) 솔루션을 개발하시면서, 고객 분들이 요청하는 주요 기능 중 하나는 웹 상에서 보여지는 리포트를 다양한 파일 형식으로 내려받을 수 있도록 구현해 달라는 요청일 것입니다. 당연한 기능 같지만, 이를 클라이언트 단에서 구현하는 것은 쉬운 일이 아닙니다.

이를 위해 ActiveReportsJS(이하 ARJS)의 JavaScript 프론트-엔드 리포트 뷰어(ReportViewer)에서는 개발자 분들이 별도의 코딩 없이도 PDF, Excel, HTML 형식으로 리포트 디자이너에서 생성한 리포트 파일을(rdlx-json)를 최종 사용자가 원하는 파일 형식으로 다운받을 수 있도록 내보내기 기능을 기본 지원합니다.

하지만, ActiveReportJS에서 기본 제공하는 PDF 내보내기를 사용하시다 보면, 기본 내장된 무료 폰트를 제외하고는, 한글로 작성된 리포트의 경우, 한글 폰트가 깨지는 현상을 경험하게 되실 것입니다.

이는 현재 ARJS에서는 한글 폰트를 저작권 등의 이슈로 기본 제공하고 있지 않고 있기 때문에 발생하는 이슈로, PDF 내보내기에서 만 발생하는 현상입니다. 현재 국내 개발자 분들 위해 한글 대표 무료 폰트들에 대해서 지원할 수 있도록 개선 중에 있습니다.

이번 포스팅에서는 리포트 디자이너에서 리포트를 작성할 때, 그리고 이를 PDF로 내보낼 때에도 깨짐 없이 한글을 내보낼 수 있도록, 원하시는 한글 폰트를 등록하고 적용하는 방법을 안내 드리겠습니다. 이를 통해, 원하시는 다양한 폰트를 적용하여 사용자에게 유려하고 가독성이 뛰어난 리포트 웹 애플리케이션을 제공하실 수 있습니다.

한글 폰트 뿐만 아니라, 기본 적으로 ARJS에서 지원하지 않는 폰트에 대해서도 추가하고자 할 때에도 동일하게 적용됩니다.

리포트 디자이너 프로그램에 한글 폰트를 적용하는 방법

먼저, 여러분이 리포트를 작성하고 만드실 때 사용하시는 리포트 디자이너 상에 원하는 한글 폰트를 적용해주기 위해서는, 아래와 같은 과정을 통해 한글 폰트를 추가할 수 있습니다.

해당 예제에서는 네이버 나눔글꼴을 사용하여 설명합니다.

(사용하시고자 하는 폰트의 정확한 사용 범위에 대해서는 사용 전에 개별적으로 다시 확인해주시기를 권장드립니다.)

1. 원하는 폰트(네이버 나눔글꼴)를 인터넷에서 검색하여 해당 폰트 파일을 다운 받습니다.

2. 각 운영체제 별로 아래와 같은 리포트 디자이너 프로그램의 설치 경로로 이동합니다.

   • Windows: %AppData%\Roaming\ActiveReportsJS Designer\

   • MacOS: ~/Library/Application Support/ActiveReportsJS Designer/

   • Linux: ~/.config/ActivereportsJS Designer/

3. 해당 경로에서 "Fonts" 라는 이름으로 새로운 폰트 폴더를 만들고, 해당 폴더 안에 다운 받은 "나눔고딕" 폰트 파일을 넣어 둡니다.
    

4. 디자이너 프로그램의 설치 경로(/ActiveReportsJS Designer) 상의 fontsConfig.json 파일에, 폰트의 이름과 폰트 파일 경로(./Fonts/NanumGothic.ttf)를 아래와 같이 입력합니다.

   폰트 안에 여러 스타일이 함께 있는 경우, "style" 속성을 통해 구분해주실 수 있습니다.

5. ARJS 리포트 디자이너 데스트톱 프로그램을 실행하면, 아래와 같이 나눔 고딕 폰트가 디자이너에 추가되 것을 볼 수 있습니다. 이제 해당 폰트를 리포트 양식을 작성하는데 사용할 수 있습니다.
   

한글 폰트가 적용된 리포트를 배포하는 방법

이제 웹 상에서도 최종 사용자가 리포트 디자이너 프로그램에서 적용한 한글 폰트를 이용하여 만든 리포트를, 웹에서도 보여주고 이를 PDF로 문제없이 내보내기 위해서는 아래와 같이 폰트 파일과 속성을 정의해줘야 합니다.

1. 배포하는 ROOT 경로( 또는 Public 경로)에 Fonts폴더와 reources 폴더를 만듭니다. 그리고 각 폴더에 아래와 같은 파일을 넣습니다.
   

   • Fonts폴더 = 폰트 파일 (NanumGothic.ttf)

   • reources 폴더 = "fontsConfig.json" 파일

     . 방법1 = 위의 디자이너 프로그램에서 폰트를 추가하기 위해, 사용했던 fontsConfig.json를 그데로 복사/붙여넣고, 파일의 경로를 배포 환경에 맞게 수정해 줍니다.

     .. Windows: %AppData%\Roaming\ActiveReportsJS Designer\

     .. MacOS: ~/Library/Application Support/ActiveReportsJS Designer/

     .. Linux: ~/.config/ActivereportsJS Designer/ . 방법2 = "fontsConfig.json" 파일을 새로 생성하고 아래와 같이 원하시는 폰트( NanumGothic)를 등록합니다.

     {
     "path": "",
     "descriptors": [
         { "name": "나눔고딕",
               "style": normal,
               "source": "../Fonts/NanumGothic.ttf"
         },
     {
     "name": "Arial"
     },
     {
     "name": "Arial Black"
     }
      
             ... (이하 생략) ...
     
     ]
     }

     
     

2. JavaScript 코드 상에서, 리포트 뷰어에서 리포트 파일을 호출하는 부분에서 아래와 같이, 해당 폰트 속성을 등록해 주시면 한글 폰트가 정상적으로 보여지게 됩니다.

   <script>
   window.onload = function () {
    var viewer = new ActiveReports.Viewer("viewer-host", {language: "ko"});
    viewer.registerFont("resources/fontsConfig.json");
    viewer.open("test.rdlx-json");
   };
   </script>

이제 리포트 뷰어 또는 API를 이용하여 PDF 내보내기를 하더라도, 정상적으로 한글이 깨짐 없이 출력이 됩니다.

해당 폰트 설정에 대한 자세한 내용은 아래의 개발자 문서를 참고해 주시기 바랍니다.

https://demo.grapecity.co.kr/activereportsjs/docs/GettingStarted/FontConfiguration

---

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!

• ActiveReportsJS 공식 홈페이지
• ActiveReportsJS 튜토리얼 및 샘플
• ActiveReportsJS Q&A
• ActiveReportsJS FAQ

• 
• 
• 
•