JavaScript로 Excel 가져오기 및 내보내기 구현하기
페이지 정보
작성자 GrapeCity 작성일 2020-02-12 00:00 조회 12,550회 댓글 0건본문
첨부파일
관련링크
JavaScript는 클라이언트 측 스크립팅 도구를 쉽게 사용자 정의 할 수 있는 다목적 플랫폼입니다. 일부 애플리케이션에서는 코딩 및 유지 관리가 쉬운 일종의 스프레드시트 인터페이스가있는 것이 유용합니다. 클라이언트 측 JavaScript 스프레드시트 컴포넌트인 SpreadJS가 이에 적합합니다.
Excel로 JavaScript 내보내기
Excel 파일을 가져오고 내보낼 수 있으며 순수 JavaScript로 파일과 상호 작용할 수 있는 인터페이스를 사용자에게 제공할 수 있습니다. 이 포스팅에서는 SpreadJS 컴를 HTML 페이지에 추가하고 Excel 파일을 가져 오는 것이 얼마나 쉬운지 보여 드리겠습니다.
JavaScript 스프레드시트 프로젝트 설정
우선 NPM에서 호스팅되는 SpreadJS 파일을 사용할 수 있습니다. 이를 위해, 명령 행 인수를 사용하여 설치할 수 있습니다. 명령 프롬프트를 열고 애플리케이션 위치로 이동한 후 하나의 명령으로 필요한 파일을 설치할 수 있습니다.
이 경우, 기본 Spread-Sheets 라이브러리, Spread-ExcelIO 및 jQuery가 필요합니다.
npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery
설치가 완료되면 코드에서 해당 script 및 CSS 파일에 대한 참조를 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS ExcelIO</title>
<script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
</head>
<body>
<div id="ss" style="height:600px; width :100%; "></div>
</body>
</html>
그런 다음 Spread.Sheets 컴포넌트를 초기화하는 스크립트와 이를 포함할 div 요소를 추가합니다. 이 과정은 SpreadJS 스프레드시트 컴포넌트가 캔버스를 사용하므로 컴포넌트를 초기화하기 위해 필요합니다.
<script type="text/javascript">
$(document).ready(function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script>
</head>
<body>
<div id="ss" style="height:600px ; width :100%; "></div>
</body>
Excel 가져 오기 코드 추가
실제로 파일을 여는 데 사용할 수 있는 클라이언트 측 ExcelIO 컴포넌트의 인스턴스를 만들어야 합니다.
var excelIO = new GC.Spread.Excel.IO();
그런 다음 파일을 가져 오는 함수를 추가합니다. 이 예에서는 로컬 파일을 가져오지만 서버의 파일을 사용하여 동일한 작업을 수행 할 수 있습니다. 서버에서 파일을 가져 오는 경우 위치를 참조해야 합니다. 다음은 사용자가 파일의 위치를 입력 할 수 있는 input 요소의 예입니다.
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />
이렇게 하면, 스크립트 코드에서 해당 값에 직접 액세스 할 수 있습니다.
var excelUrl = $("#importUrl").val();
가져오기 기능에 대한 다음 코드는 "excelUrl" 변수에 대한 로컬 파일을 사용합니다.
function ImportFile() {
var excelUrl = "./test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType = 'blob';
oReq.onload = function () {
var blob = oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData = json;
workbook.fromJSON(json);
workbook.setActiveSheet("Revenues (Sales)");
}
서버에서 파일을 참조하는지 로컬에서 파일을 참조하는지에 관계없이 $(document).ready 함수 내에서 스크립트에 다음 코드를 추가해야 합니다.
$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});
Excel 파일에 데이터 추가
이 포스팅에서는 "손익계산서" Excel 템플릿을 사용하는 로컬 파일을 가져옵니다.
이제 Spread.Sheets 스크립트를 사용하여 이 파일에 다른 매출 행을 추가 할 수 있습니다. 다음 작업을 수행할 페이지에 버튼을 추가합니다.
<button id="addRevenue">Add Revenue</button>
일부 데이터 추가에 대비하여 행을 추가하고 이전 행의 스타일을 복사하기 위해 해당 버튼의 click 이벤트 핸들러에 함수를 작성합니다. 스타일을 복사하려면 copyTo 함수를 사용하고 다음의 세가지를 전달해야 합니다.
- 출발지 및 목적지 행 및 열 인덱스
- 행 및 열 수
- 스타일의 CopyToOptions 값
document.getElementById("addRevenue").onclick = function () {
var sheet = workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}
이 버튼 클릭 이벤트 핸들러에는 데이터 및 스파크 라인을 추가하기 위한 다음 스크립트 코드가 모두 포함됩니다. 대부분의 데이터에 대해 setValue 함수를 사용할 수 있습니다 . 이를 통해, 행 인덱스, 열 인덱스 및 값을 전달하여 스프레드시트의 값을 설정할 수 있습니다.
sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c = 3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}
다른 행과 일치하도록 P열에 SUM 수식을 설정하고 Q 열에 백분율을 설정합니다.
sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);
마지막으로 copyTo 함수를 다시 사용하여 이번에는 CopyToOptions.formula를 사용하여 이전 행의 수식을 R열부터 AD열까지의 새 행으로 복사할 수 있습니다.
sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);
스파크라인 추가
이제 다른 데이터 행과 일치하도록 스파크라인을 추가 할 수 있습니다. 이를 위해서는 데이터를 얻을 수 있는 셀 범위와 스파크라인 설정을 제공해야 합니다. 이 경우 다음을 지정할 수 있습니다.
- 방금 데이터를 추가한 셀 범위
- 스파크라인이 같은 열의 다른 스파크라인과 비슷하게 보이도록 설정
var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor = "Text 2";
setting.options.lineWeight = 1;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.lowMarkerColor = "Text 2";
setting.options.highMarkerColor = "Text 1";
그런 다음 setSparkline 메소드를 호출하고 다음을 지정합니다.
- 스파크라인의 위치
- 데이터의 위치
- 스파크라인의 방향
- 스파크라인의 유형
- 우리가 만든 설정
sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);
지금 코드를 실행하려고 하면 데이터가 변경되고 스타일이 추가될 때마다 통합 문서가 다시 그려지므로 약간 느려질 수 있습니다. Spread.Sheets는 속도를 높이고 성능을 향상시키기 위해 페인팅 및 계산을 일시 중단하는 기능을 제공합니다. 행과 데이터를 추가하기 전에 일시 중단하도록 코드를 추가한 후 다음을 모두 다시 시작하겠습니다.
workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();
해당 코드를 추가한 후, 웹 브라우저에서 페이지를 열면 매출 행이 추가된 Excel 파일이 Spread.Sheets에 로드된 것을 볼 수 있습니다.
중요한 점 : Chrome에서는 보안을 위해 로컬 파일을 열 수 없으므로 Firefox와 같은 웹 브라우저를 사용하여 이 코드를 실행해야 합니다. 또는 웹 사이트 URL에서 파일을 로드하면 모든 브라우저에서 정상적으로 열립니다.
Excel 내보내기 코드 추가
마지막으로 버튼을 추가하여 행이 추가 된 파일을 내보낼 수 있습니다. 이를 위해 Spread.Sheets에 내장된 클라이언트 측 ExcelIO 코드를 사용할 수 있습니다.
function ExportFile() {
var fileName = $("#exportFileName").val();
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = JSON.stringify(workbook.toJSON());
excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode === 1) {
alert(e.errorMessage);
}
});
}
이 코드는 exportFileName input 요소에서 내보내기 파일 이름을 가져옵니다 . 이를 정의하고 사용자가 다음과 같이 파일 이름을 지정하도록 할 수 있습니다.
<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
그런 다음, 이 함수를 호출하는 버튼을 추가할 수 있습니다.
<button id="export">Export File</button>
document.getElementById("export").onclick = function () {
ExportFile();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
파일이 성공적으로 내보내지면, Excel에서 그 파일을 열 수 있고, 그 파일이 가져와졌을 때처럼 동작하는 것을 볼 수 있습니다. 단, 우리가 추가한 매출 행이 존재합니다.
지금까지 SpreadJS JavaScript 스프레드시트를 사용하여 Excel 파일에 데이터를 추가한 다음 간단한 JavaScript 코드를 사용하여 Excel로 다시 내보낼 수 있는 방법에 대해 살펴 보았습니다.
다른 포스팅에서는 다른 Javascript 프레임워크에서 Excel 스프레드시트를 내보내는 방법을 보여줍니다.
댓글목록
등록된 댓글이 없습니다.