고급기능 JavaScript를 사용하여 URL에서 Excel XLSX 파일을 읽는 방법
페이지 정보
작성자 GrapeCity
작성일 2023-04-18 16:45 조회 577회
댓글 0건
본문
관련링크
GrapeCity의 JavaScript 스프레드시트 API인 SpreadJS는 SpreadJS Excel IO 모듈을 사용하여 복잡한 Excel(.XLSX) 파일을 가져오고 내보냅니다. Excel IO 모듈에는 Excel에 종속되지 않고 바로 내장된 가져오기 및 내보내기를 위한 순수 JavaScript 로직이 포함되어 있습니다. 이 기능은 응용 프로그램 플랫폼을 독립형으로 구축해야 할 때 매우 유용합니다.
Excel IO 모듈은 JavaScript를 사용하여 모든 HTML 페이지에서 실행할 수 있어 SpreadJS를 JavaScript 응용 프로그램에 쉽게 통합할 수 있습니다. 현재 Excel 파일을 사용자 시스템에서 가져오는 방법을 보여 주는 라이브 데모가 있지만 SpreadJS도 지정된 URL에서 Excel 파일 가져오기를 지원합니다. 이 블로그에서는 지정된 URL에서 Excel 파일을 가져오고 읽기 위해 Excel IO 요소에 SpreadJS API를 활용하는 방법을 살펴보겠습니다.
JavaScript 응용 프로그램의 URL에서 Excel XLSX 파일을 읽는 방법
- SpreadJS 스프레드시트로 JavaScript 프로젝트를 만들기
- URL을 사용하여 Excel 파일을 가져오고 blob으로 파일을 반환하기
- Excel 파일의 blob을 읽고 SpreadJS 스프레드시트로 가져오기
1단계: SpreadJS 스프레드시트로 JavaScript 프로젝트를 만들기
먼저 간단한 HTML 파일을 만드는 것으로 시작합니다.
index.html
<!doctype html>
<html lang="en" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
</body>
</html>프로젝트에 필요한 SpreadJS 릴리스 파일을 포함합니다. 파일은 HTML 파일의 head 태그에 포함할 수 있습니다.
| 기본 SpreadJS 라이브러리 | spread.sheets.all.x.x.x.min.js |
|---|---|
| SpreadJS 플러그인 | spread.sheets.charts.x.x.x.min.js – 차트를 보려면 포함해야 합니다. spread.sheets.shapes.x.x.x.min.js – 셰이프를 보려면 포함해야 합니다. |
| Excel IO 라이브러리 | spread.excelio.x.x.x.min.js |
| SpreadJS CSS - SpreadJS 테마 설정 | spread.sheets.excel2013white.css선택할 수 있는 여러 SpreadJS 테마 |
index.html
<!doctype html>
<html lang="en" 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.min.js" type="text/javascript"></script>
<script src="...gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>SpreadJS는 NPM에서 사용할 수 있습니다
개발자는 NPM을 사용하여 SpreadJS를 설치할 수 있습니다.
다음은 NPM 페이지의 링크입니다.
| 기본 SpreadJS 라이브러리 | @grapecity/spread-sheetsSpreadJS CSS 테마를 설치합니다. node_modules/@grapecity/spread-sheets/styles |
|---|---|
| SpreadJS 플러그인 | @grapecity/spread-sheets-charts – 차트를 보려면 포함해야 합니다.@grapecity/spread-sheets-shapes – 셰이프를 보려면 포함해야 합니다. |
| Excel IO 라이브러리 | @grapecity/spread-excelio |
이제 SpreadJS가 JavaScript 프로젝트에 포함되었으므로 통합 문서와 Excel IO 모듈을 초기화해야 합니다.
이 데모에서 JavaScript 파일을 만들었으며 이 작업을 수행하기 위해 Window Onload 함수를 추가했습니다.
apps.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var excelIo = new GC.Spread.Excel.IO();
}마지막으로, DIV 요소를 추가하여 웹페이지에서 SpreadJS를 호스팅합니다.
index.html
<!doctype html>
<html lang="en" 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.min.js" type="text/javascript"></script>
<script src="...gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="...gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<!-- Workbook host element -->
<div id="ss" style="width:75%;height:75%"></div>
</body>
</html>결과: JavaScript 스프레드시트 컨트롤인 SpreadJS를 이제 브라우저에서 확인할 수 있습니다.
2단계: URL을 사용하여 Excel 파일을 가져오고 blob으로 파일을 반환하기
페이지 본문에 다음 HTML 입력 요소 2 개를 추가합니다.
- 입력 유형 - URL을 지정하는 데 사용됩니다. 예로, 이 Excel 파일 링크 [https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx](https://cdn.grapecity.com/support/spread/Kevin Ashley/export.xlsx)를 사용합니다.
- 입력 버튼 유형 - 클릭 시 URL에서 파일을 가져오는 데 사용됩니다.
index.html
<body>
<!-- Workbook host element -->
<div id="ss" style="width:75%;height:75%"></div>
<p>Import URL</p>
<input id="importURL"value="https://cdn.grapecity.com/support/spread/Kevin%20Ashley/export.xlsx"/>
<button id="loadFromURL">Import Excel from URL</button>
</body>클릭 이벤트 수신기를 추가합니다. 버튼에서 클릭을 캡처하고 입력에서 URL을 읽습니다.
이벤트 내에서 API 가져오기를 사용하여 가져오기 요청을 설정하고 연결된 Excel 통합 문서 데이터를 blob으로 반환합니다.
app.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
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);
});
})
};결과: 이제 blob으로 URL을 반환하겠습니다. blob은 현재 콘솔에서 볼 수 있습니다.
3단계: Excel 파일의 blob을 읽고 SpreadJS 스프레드시트로 가져오기
이제 URL에서 Excel 파일의 데이터를 가져오고 파일의 데이터를 blob으로 반환할 수 있습니다. 마지막 단계는 blob을 읽고 SpreadJS 인스턴스로 가져오는 것입니다.
이 작업을 완료하려면 가져오기 요청 내에서 Excel IO의 open 메서드와 SpreadJS의 fromJSON 메서드를 사용해야 합니다.
app.js
window.onload = function () {
// Initialize SpreadJS and ExcelIO
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);
excelIo.open(blob, (json) => {
spread.fromJSON(json);
},
(message) => {
console.log(message);
});
});
})
};결과: 사용자는 이제 URL의 웹 앱에서 Excel 파일을 보고 편집할 수 있습니다. 내보내기 기능을 추가하는 방법을 보여주는 별도의 블로그가 있습니다. 확인해 보세요!
지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
