SpreadJS 5

SpreadJS AI 도우미 - 수식 해설과 생성을 동시에!

요즘 AI가 대세라고 하더니 일반 자바스크립트 UI 제품에서도 이제 AI 기능이 탑재되고 있네요 몇 년전만 해도 생각도 못한 부분인데 너무 놀라울 따름입니다. 현재 사용중인 SpreadJS(웹에서 돌아가는 Excel 같은 스프레드시트 라이브러리)에서도 AI 기능을 제공하는데요 다만 아직 공식적으로 지원은 안하고 맛보기로 어떤 기능을 제공한다~ 이정도 인 거 같더라구요 그럼 간단히 해당 기능에 대해서 소개드리겠습니다. AI 기능의 이름은 AI Assistant이고 이 AI 비서가 하는 일은 크게 두 가지입니다.수식 자동 생성 – 자연어로 설명하면 AI가 알아서 수식 만들어줌수식 해설 – 복잡한 수식을 쉽게 풀어서 설명해줌이제 더 이상 함수 이름 까먹고 문서 찾을 필요 없이, 그냥 하고 싶은 걸 입력하면 ..

엑셀 차트 그려보기 (DataCharts) - SpreadJS

JSON 기반 데이터에 차트를 얹어야 할 일이 생겨서 SpreadJS의 DataChart 기능을 써봤습니다. 기본 차트 기능도 있긴 한데 데이터관리자(Data Manager) 기반이라 “데이터만 연결하면 차트가 바로 그려진다”는 느낌이에요. ✅ DataChart가 뭐야?- 일반 차트보다 유연하게 데이터를 Dynamic하게 시각화할 수 있는 기능- DataManager에 직접 연결돼, JSON 업데이트를 반영함 - 엑셀처럼 시트 내부 범위 기반이 아니라, 데이터 모델에 붙는 방식📌 단점: 이 기능을 쓰려면 DataCharts 플러그이 필요하고, Excel 내보내기 하면 이미지로 저장됨 기본 코드 결과 이미지는 위와 같습니다 직접 써보니 ..

SpreadJS로 JSON 데이터 바인딩하기

SpreadJS 여러 기능을 테스트를 하는 중 이번에는 setDataSource() 메서드로 JSON 데이터 바인딩하는 기능에 대해서 보았습니다.1. 기본 바인딩 구조SpreadJS에서 JSON 데이터를 시트에 바인딩하려면 워크북 생성 → 시트 지정 → `setDataSource()` 순서로 연결하면 됩니다.예제:딱히 설정할 게 없고, JSON 객체의 key가 열로 자동 매핑됩니다. 2. 열 수동 설정자동으로 열이 생성되는 게 싫다면 autoGenerateColumns를 꺼두고 보여줄 열만 직접 바인딩할 수 있습니다. sheet.autoGenerateColumns = false;sheet.setDataSource(data); // 데이터 먼저 바인딩sheet.bindColumns([ { name:..

웹 브라우저에서 Excel 파일 내보내기 및 불러오기 - SpreadJS

웹에서 Excel 파일을 불러오고 저장하는 니즈가 있어 SpreadJS의 엑셀 import/export 기능을 살펴보았습니다.일반 엑셀 유형 뿐만 아니라 자체적으로 지원하는 sjs, ssjson 등도 있더라구용 일단 설정 방법은 먼저 헤더 섹션에 gc.spread.sheets.io를 추가 설정해줘야 합니다.🔧 설정 방법 (HTML) 그 다음 spreadjs 컨트롤을 호스팅할 div 요소와 엑셀 불러오기/내보내기 이벤트를 불러올 버튼을 추가해줍니다. 🚀 JavaScript 설정📦 SpreadJS 초기화그 다음은 GC.Spread.Sheets.Workbook의 인스턴스를 생성해줍니다.var spread;window.onload = function () { sprea..

웹 브라우저에서 엑셀? 구현하기 - SpreadJS

브라우저에서 엑셀과 같은 기능 구현에 대한 니즈가 있어 찾던 중 SpreadJS에 대해 알게 되어 공부해보았습니다. 처음에는 엑셀 기능을 JS로 구현할 수 있다는 말에 과연이라는 생각이 들었는데 막상 써보니까 나쁘지 않더라구요 공식 홈페이지를 보니 그냥 엑셀 웹버전이고 필터, 차트, 수식 설정도 있구요 공식 문서에 기본 예제에 그냥 복붙하니 금방 구현 가능했어요 ㅋㅋ 단순하게 html 에 호스팅할 div 태그 설정해주고 WorkBook 인스턴스 생성하면 워크북이 만들어집니다setValue 는 데이터 할당해주는 메서드인 거 같습니당https://demo.mescius.co.kr/spreadjs/learn-spreadjs/features/workbook/initialization/purejs Spread ..