많은 기업들이 Microsoft Excel과 같은 스프레드시트를 통해 업무를 관리하고 있으며, 이는 최신 JavaScript 애플리케이션에서 이러한 파일들을 다룰 수 있는 기능이 필수적임을 의미합니다.
SpreadJS는 JavaScript 스프레드시트 컴포넌트로, 브라우저 내에서 복잡한 XLSX 파일을 불러오고, 보기 및 편집, 저장할 수 있게 해줍니다.
이번 블로그에서는 SpreadJS를 활용해 XLSX Viewer를 구축하는 방법을 소개하며, Excel 파일을 가져오고 시트를 보호해 사용자의 편집을 제어하는 기능까지 다룹니다.
📢 지금 SpreadJS 다운로드 하고 JavaScript 엔터프라이즈 웹앱에 스프레드시트를 추가하세요!
JavaScript Web App에 Excel XLSX 뷰어 추가하는 방법
- JavaScript 스프레드시트 애플리케이션 생성
- Excel 가져오기 코드 추가 - Import Method
- 비밀번호로 JS Excel Viewer 보호 - Protect/Unprotect 메서드
1. JavaScript Excel 스프레드시트 애플리케이션 생성
HTML 파일을 만들고 다음과 같이 뷰어용 DOM 요소와 사이드 패널 UI를 구성합니다:
<body>
<div style="display: flex; flex-direction: row; align-items: flex-start;">
<!-- 스프레드시트 뷰어 -->
<div id="spreadContainer" style="width: 925px; height: 600px;"></div>
<!-- 사이드 패널 -->
<div id="sidebar" style="width: 275px; padding: 20px; background: #ddd; margin-left: 10px;">
<p>Excel 파일 (.xlsx) 열기:</p>
<input type="file" id="fileInput" />
<button id="openButton">Excel 열기</button>
<div style="margin-top: 20px;">
<img id="protectStatus" src="data:image/png;base64...." alt="보호 상태" style="height: 25px;" />
<p>비밀번호: <input type="password" id="passwordInput" /></p>
<button id="protectBtn">보호</button>
<button id="unprotectBtn">보호 해제</button>
</div>
</div>
</div>
</body>필수 NPM 패키지를 설치합니다:
npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-io
npm install @mescius/spread-sheets-charts
npm install @mescius/spread-sheets-shapes[SpreadJS 패키지 파일 다운로드]
npm을 사용하지 않는 개발 프로젝트의 경우,
홈페이지를 통해서 개발에 필요한 JavaScript Excel 라이브러리를 다운 받을 수 있습니다.
HTML <head>에 다음 참조를 추가하세요:
<!-- SpreadJS CSS -->
<link rel="stylesheet" href="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SpreadJS 스크립트 -->
<script src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script src="./node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"></script>
<script src="./node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"></script>
<script src="./node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"></script>
<!-- 앱 로직 -->
<script src="./app.js"></script>SpreadJS API를 사용해 스프레드시트를 초기화합니다:
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(
document.getElementById("spreadContainer"),
{ sheetCount: 2 }
);
};이제 JavaScript 애플리케이션에 스프레드시트 인스턴스가 표시됩니다.
🧪 참고: Quick Start 데모 보기
📚 빠른 시작 문서 보기
다음으로, 측면 패널에 몇 가지 기능을 추가해 보겠습니다.
2. JavaScript 앱에 Excel 가져오기 기능 추가
.xlsx 파일을 불러오는 기능을 구현해보겠습니다.
이벤트 리스너를 활용해 파일을 선택하고, SpreadJS의 import() 메서드를 호출합니다.
document.getElementById("openButton").addEventListener("click", openExcelFile);
let selectedFile = null;
// 파일 선택 감지
document.getElementById("fileInput").addEventListener("change", (e) => {
selectedFile = e.target.files[0];
});
// Excel 파일 불러오기
function openExcelFile() {
if (!selectedFile) return;
const options = { fileType: GC.Spread.Sheets.FileType.excel };
spread.import(
selectedFile,
() => console.log("Import successful"),
(error) => console.error("Import error:", error),
options
);
}이제 사용자가 선택한 .xlsx 파일이 웹 앱에 로드됩니다.
🔍 관련 자료:
3. JavaScript Excel Viewer에 비밀번호 보호 기능 추가
사용자가 파일을 불러온 후 특정 편집을 제한하고 싶다면, 시트 보호 기능을 사용할 수 있습니다.
아래는 비밀번호를 적용해 워크시트를 보호하는 코드입니다:
function protectSheet() {
let sheet = spread.getActiveSheet();
if (sheet.options.isProtected) {
alert("이미 보호된 시트입니다.");
return;
}
let password = document.getElementById("passwordInput").value;
sheet.protect(password);
document.getElementById("protectStatus").src = protectImg;
document.getElementById("passwordInput").value = "";
}보호 해제 코드:
function unprotectSheet() {
let sheet = spread.getActiveSheet();
let password = document.getElementById("passwordInput").value;
if (sheet.hasPassword()) {
let success = sheet.unprotect(password);
if (!success) {
alert("비밀번호가 올바르지 않습니다.");
return;
}
} else {
sheet.unprotect();
}
document.getElementById("protectStatus").src = unprotectImg;
document.getElementById("passwordInput").value = "";
}이제 사용자는 설정된 비밀번호를 사용하여 JavaScript 스프레드시트를 보호하거나 보호를 해제할 수 있습니다.
📚 참고자료:
SpreadJS: JavaScript Spreadsheet 컴포넌트
이 블로그에서 소개한 기능은 SpreadJS의 일부에 불과합니다.
아래 링크를 통해 더 많은 데모와 기능을 확인해보세요:
다양한 플랫폼별 구현 방법도 확인해보세요:
