고급기능 URL을 통해 엑셀 XLSX 파일을 가져오는 방법
페이지 정보
작성자 GrapeCity
작성일 2023-02-28 14:07 조회 394회
댓글 0건
본문
관련링크
SpreadJS는 Excel IO 모듈을 이용하여 .XLSX 파일 가져오기 및 내보내기를 지원합니다.
Excel IO 모듈은 Excel에 종속되지 않고 가져오기 및 내보내기가 가능하기 때문에 독립적인 애플리케이션 플랫폼을 만들 수 있습니다.
Excel IO 모듈을 이용하여 클라이언트 단 파일을 불러올 수 있고, 지정된 URL에서 Excel 파일 가져오기도 지원합니다.
이번 글에서는 지정된 URL을 통해 Excel 파일을 가져오는 방법에 대해 설명합니다.
1. SpreadJS 프로젝트 만들기
2. URL을 이용하여 Excel 파일을 가져오고 BLOB로 반환하기
3. BLOB를 읽어 SpreadJS로 가져오기
1. SpreadJS 프로젝트 만들기
간단한 HTML 파일을 만듭니다.
이때, 필요한 SpreadJS 릴리즈 파일을 프로젝트에 선언하고 workbook 및 Excel IO 모듈을 초기화합니다.
기본 SpreadJS 라이브러리 | gc.spread.sheets.all.x.x.x.min.js |
SpreadJS 플러그인 | gc.spread.sheets.charts.x.x.x.min.js - 차트를 가져오기 위해 반드시 필요 gc.spread.sheets.shapes.x.x.x.min.js - 도형을 가져오기 위해 반드시 필요 |
Excel IO 라이브러리 | gc.spread.excelio.x.x.x.min.js |
SpreadJS CSS | gc.spread.sheets.excel2013white.css |
index.html
<!doctype html>
<html lang="ko" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="...gc.spread.sheets.excel2013white.css"/>
<script src="...gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
<script src="...gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div id="ss" style="width:75%;height:75%"></div>
</body>
</html>app.js
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
}2. URL을 이용하여 Excel 파일을 가져오고 BLOB으로 반환하기
페이지의 본문에 두 가지 HTML 요소를 추가합니다.
- Input 태그 - 지정된 URL을 입력합니다. 이번 예에서는 아래 링크를 이용합니다.
링크: https://assets.codepen.io/975719/export.xlsx - button 태그 - 클릭 시 URL을 통해 파일을 가져옵니다.
<body>
<p>URL 입력</p>
<input id="importURL"value="https://assets.codepen.io/975719/export.xlsx"/>
<button id="loadFromURL">URL을 통해 엑셀 가져오기</button>
<div id="ss" style="width:75%;height:75%"></div>
</body>클릭 이벤트 리스너를 추가하여 버튼 클릭 시 input에서 URL을 읽습니다. 이벤트 내에서 Fetch API를 사용하여 Excel 파일을 가져오고 BLOB으로 반환합니다.
app.js
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadFromURL').addEventListener('click', function () {
var url = document.getElementById("importURL").value;
fetch(url)
.then(res => res.blob()) // returns URL data a blob
.then((blob) => {
console.log(blob);
});
})
};3. BLOB을 읽어 SpreadJS로 가져오기
마지막 단계는 BLOB을 읽고 SpreadJS로 가져옵니다.
아래의 메소드를 사용하여 수행합니다.
app.js
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadFromURL').addEventListener('click', function () {
var url = document.getElementById("importURL").value;
fetch(url)
.then(res => res.blob())
.then((blob) => {
// console.log(blob);
excelIo.open(blob, (json) => {
spread.fromJSON(json);
},
(message) => {
console.log(message);
});
});
})
};<결과 화면>
아래 샘플 화면에서 "URL을 통해 엑셀 가져오기" 버튼을 클릭하면,
아래 URL의 엑셀 파일을 가져와 SpreadJS에 표시합니다.
https://assets.codepen.io/975719/export.xlsx
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
