프로그래밍/spreadjs
웹 브라우저에서 Excel 파일 내보내기 및 불러오기 - SpreadJS
benscript
2025. 6. 8. 22:29
반응형
웹에서 Excel 파일을 불러오고 저장하는 니즈가 있어 SpreadJS의 엑셀 import/export 기능을 살펴보았습니다.
일반 엑셀 유형 뿐만 아니라 자체적으로 지원하는 sjs, ssjson 등도 있더라구용
일단 설정 방법은 먼저 헤더 섹션에 gc.spread.sheets.io를 추가 설정해줘야 합니다.
🔧 설정 방법 (HTML)
<link href="css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="application/javascript"></script>
<script src="scripts/gc.spread.sheets.io.x.x.x.min.js"></script>
<script src="scripts/FileSaver.js"></script>
그 다음 spreadjs 컨트롤을 호스팅할 div 요소와 엑셀 불러오기/내보내기 이벤트를 불러올 버튼을 추가해줍니다.
<input type="file" name="files[]" id="fileDemo" accept=".xlsx" />
<input type="button" id="loadExcel" value="Import" onclick="ImportFile()" />
<input type="button" class="btn btn-default" id="saveExcel" value="Export" onclick="ExportFile()" />
<div id="spread-test" style="width:100%; height:500px"></div>
🚀 JavaScript 설정
📦 SpreadJS 초기화
그 다음은 GC.Spread.Sheets.Workbook의 인스턴스를 생성해줍니다.
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread-test"));
}
📥 Excel 파일 불러오기
그 다음으로 엑셀 파일 불러오기를 spread의 import 함수를 호출하는 코드를 설정하고 구현해줍니다.
// xlsx, ssjson, csv file spread 로 가져오기
function ImportFile() {
var file = document.getElementById("fileDemo").files[0];
spread.import(file, function () {
// 성공 callback
}, function (e) {
console.log(e); // 에러 callback
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
📤 Excel 파일 내보내기
마지막으로 spread의 export 함수를 호출하여 내보내기 기능을 구현합니다.
// spread를 xlsx, ssjson, csv 파일로 내보내기
function ExportFile() {
var fileName = "export.xlsx";
spread.export(function (blob) {
// blob을 파일로 저장하기
saveAs(blob, fileName);
}, function (e) {
console.log(e);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
위의 코드만 설정하면 간단하게 자바스크립트로 엑셀 내보내기/가져오기 기능 구현 완료했습니다.
생각보다 글이 짧아서 좀 민망하네요
엑셀 형식 뿐만 아니라 내보내기/가져오기 할 때 성능이 향상된 sjs 형식도 지원한다는데 그건 아래 링크 참고해주세요!
반응형