SpreadJS(스프레드JS)는 순수 JavaScript 기반의 웹 엑셀(Web-Excel) 컴포넌트로 여러분의 웹 상에서 Microsoft Excel 파일을 불러오고 이를 수정 편집 및 내보내기 작업을 할 수 있도록, 엑셀 UI 부터, 엑셀 함수(98%지원), 조건부 서식, 엑셀 차트, 피벗 테이블, 테이블, 도형, 이미지 등 MS Excel(엑셀)의 거의 모든 기능을 자바스크립트 라이브러리로 제공하고 있습니다. 그렇기 때문에 SpreadJS를 사용하면, 최종 사용자에게 MS Excel과 유사한 화면과 기능 기반으로 기존 Excel과 호환이 가능한 다양한 웹 솔루션을 개발할 수 있습니다.

SpreadJS는 기본적으로 MS Excel과 높은 호환성을 제공해 드리기 위해, Excel의 대부분의 기능을 JavaScript로 구현하여 제공하고 있습니다.

하지만, 웹이라는 환경의 제약 사항, 즉 브라우저에 돌아가는 프론트 엔드 제품의 특성 상, MS Excel 데스크톱 버전에서 제공하는 기능 모두를 지원하는데 현재의 기술로는 어려움이 있습니다. 반대로, 웹에서 엑셀을 사용하시는 사용자 분들의 편의 위해 SpreadJS에서 만 제공하는 기능의 경우, MS Excel에서는 호환이 안 될 수 있습니다.

이번 글에서는 아래와 같이 웹 및 환경 상의 제약으로 인해 SpreadJS에서 지원할 수 없는 기능들에 관하여 설명합니다. 이를 통해, SpreadJS를 사용하여 Excel 기반의 웹 솔루션을 설계하고 구현하시는데 많은 도움이 되었으면 합니다.

1. 서버 단 파일 저장

SpreadJS는 프론트엔드 제품이기 때문에 클라이언트 단으로 XLSX, CSV, PDF 파일을 저장할 수 있지만, SpreadJS를 단독으로 사용하는 경우에는 서버 단으로 파일을 저장할 수 없습니다.

* SpreadJS에서 작성된 시트를 서버 단에 파일 형태로 저장하기 위해서는 DsExcel을 함께 사용해야 합니다.

프론트엔드(Front-End) 단에서 엑셀 파일을 불러오고 내보내는 샘플은 아래에서 확인하실 수 있습니다.

각 환경에 따라 DsExcel Java / DsExcel .NET 으로 제공되고 있습니다.

SpreadJS와 DsExcel을 함께 사용하면 최종 사용자에게 Excel과 동일한 화면과 동작을 제공하는 동시에, 백엔드 단에서는 DsExcel API를 이용하여 SpreadJS로부터 받은 Excel 데이터를 강력한 서버의 리소스를 이용하여 빠르게 처리할 수 있습니다.

 2. 클라이언트 단 파일 저장 경로 지정

SpreadJS는 JavaScript로 만들어진 제품이기 때문에 클라이언트 PC의 특정 경로에 접근할 수 없습니다.

사용 중인 브라우저에서 설정된 다운로드 위치 외에는 접근이 불가능합니다.

이와 마찬가지로, 일반적으로는 파일 저장 시 Downloads 폴더에 바로 저장되는데, 이를 사용자가 위치를 직접 지정할 수 있도록 창을 띄우는 것 역시 SpreadJS에서 제어할 수 없으며 브라우저의 설정을 따르게 됩니다.

예를 들어, Chrome에서는 설정의 다운로드 탭에 들어가면 다운로드 경로 및 다운로드 전 파일 저장 위치 확인 여부를 설정할 수 있습니다.

(chrome://settings/downloads)

3. XLS 확장자 지원불가

일반적으로 사용하는 Excel 파일의 확장자는 XLSX와 XLS가 있습니다.

XLS 파일은 Microsoft Office 2003 버전까지 지원하던 바이너리 형식의 문서이며, XLSX 파일은 Microsoft Office 2000 버전부터 현재까지 지원하고 있는 XML 형식의 문서입니다.

웹 브라우저에서는 XML 형식의 문서는 읽을 수 있으나, 바이너리 형식의 문서는 읽을 수 없기 때문에 SpreadJS에서도 XML 형식인 XLSX 확장자만 사용할 수 있습니다.

4. 매크로 지원 불가

Excel의 매크로(VBA)는 Microsoft Excel 데스크톱 버전에서만 지원하는 고유 기능입니다.

그렇기 때문에 매크로를 포함하고 있는 XLSM 확장자는 웹 상에 불러오고 실행할 수 없으며, Excel에서 해당 파일을 열어 XLSX 확장자로 저장하여야 SpreadJS로 불러올 수 있습니다.

매크로를 가져올 수 는 없지만, 매크로의 동작을 SpreadJS API와 JavaScript 코드로 별도 구현하여 기존의 매크로를 대체할 수 있습니다.

5. 특정 셀 타입 엑셀 내보내기

SpreadJS는 콤보 박스나 체크 박스와 같은 여러 셀 타입을 지원합니다.

하지만 이 기능은 Excel에서는 지원하지 않는 SpreadJS의 자체 기능입니다. 그렇기 때문에 당연하게도 이 기능은 Excel로 내보낼 시 유지되지 않습니다.

셀 타입 외에도 이러한 기능들이 있습니다. 이에 대한 자세한 내용은 Excel-Formatted Files Export 도움말에서 확인하실 수 있습니다.

반대로, Excel 파일을 SpreadJS로 불러올 때, SpreadJS의 세팅 기능은 Excel-Formatted Files Import 도움말에서 확인하실 수 있습니다.

6. PDF 내보내기/인쇄 시 글씨가 작으면 안 보이는 문제

PDF 내보내기를 하거나 인쇄할 때 종종 한 페이지에 데이터를 모두 담으려고 하면 글씨 크기가 작게 표시됩니다.

브라우저마다 설정된 최소 글꼴 크기가 있으며, 이보다 작은 글씨는 브라우저에서 표현하지 못할 수 있습니다. 그렇기 때문에 만약 PDF 내보내기나 인쇄 시 글씨가 보이지 않는다면, 브라우저의 최소 글꼴 크기를 변경해 보시기 바랍니다.

크롬에서는 아래와 같이 설정이 가능합니다.

설정 - 모양 - 글꼴 맞춤설정 - 최소 글꼴 크기 (chrome://settings/fonts)

위 경로에서 최소 글꼴 크기를 더 작게 설정해 보시기 바랍니다.

7. 표 내 셀 병합 후 Excel 내보내기

시트에 표를 생성할 때 표 내의 셀을 병합하여 사용하려는 경우가 종종 있습니다.

SpreadJS에서는 표 내의 셀을 병합할 수 있지만, 되도록 병합하지 않고 사용하시길 권장 드립니다.

Excel에서는 표 내의 셀 병합을 지원하지 않기 때문에 SpreadJS에서 병합이 있는 표를 포함하여 Excel 내보내기 시, 병합이 풀리거나 표의 모양이 망가질 수 있습니다.

Excel에서 표 내의 병합을 시도하면 아래와 같은 에러가 나타납니다.

Excel 내보내기를 하게 될 가능성이 있는 템플릿이라면 되도록 표 내의 셀 병합을 하지 않는 것을 권장 드립니다.

지금까지 웹 및 환경 상의 제약으로 인해 지원할 수 없는 기능들에 대해 알아보았습니다.

이외에 궁금하신 내용이 있는 경우, SpreadJS Q&A | 토론 게시판에 문의를 남겨주시기 바랍니다.

감사합니다.

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

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