! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

JavaScript를 사용하여 Excel XLSX를 가져오고 내보내는 방법 > 온라인 스터디

본문 바로가기

고급기능 JavaScript를 사용하여 Excel XLSX를 가져오고 내보내는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-10-12 15:33 조회 624회 댓글 0건

본문

JavaScript는 클라이언트 측 스크립팅 도구를 손쉽게 사용자 정의할 수 있는 다용도 플랫폼입니다. 일부 응용 프로그램의 경우 코딩 및 유지 관리가 쉬운 몇 가지 스프레드시트 인터페이스가 있으면 도움이 됩니다. SpreadJS (클라이언트 측 JavaScript 스프레드시트 컴포넌트)가 이에 가장 적합합니다.

이 블로그에서는 다음 단계에 따라 JavaScript에서 Excel로 가져오기/ 내보내기 방법에 대해 다룹니다.

  1. JavaScript 스프레드시트 프로젝트 설정

  2. Excel 가져오기 코드 추가

  3. 가져온 Excel 파일에 데이터 추가

  4. 스파크라인 추가

  5. Excel 내보내기 코드 추가


img


JavaScript 스프레드시트 프로젝트 설정


먼저 NPM에서 호스팅되는 SpreadJS 파일을 사용할 수 있습니다. 이렇게 하려면 Command Line을 사용해 설치하면 됩니다. 명령 프롬프트를 열고 응용 프로그램 위치로 이동합니다. 거기에서 한 가지 명령으로 필요한 파일을 설치할 수 있습니다.

이 경우 다음과 같이 기본 Spread-Sheets 라이브러리, Spread-ExcelIO, jQuery가 필요합니다.

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery


SpreadJS는 jQuery에 종속되지 않지만 이 경우 쉬운 cross-origin-request 지원에 사용합니다. 이 지원은 나중에 살펴보겠습니다.

설치되고 나면 다음과 같이 코드에서 이러한 스크립트 및 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>  


또한 SpreadJS 및 jQuery 파일 이외에 가져온 FileSaver 라이브러리도 필요합니다.

그런 다음, 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 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"));  
   //...  
}); 

 

이 경우 URL에서 파일을 잠재적으로 로드하기 때문에 Cross-Origin-Request 지원을 활성화해야 합니다. $.support.cors = true; 행 또는 로드 시도 때문에 CORS 오류가 발생합니다.



가져온 Excel 파일에 데이터 추가


이 튜토리얼에서는 "손익계산서" Excel 템플릿을 사용하는 로컬 파일을 가져옵니다.

img


이제 Spread.Sheets 스크립트를 사용해 이 파일에 또 하나의 수익선을 추가할 수 있습니다. 페이지에 이 작업을 수행할 버튼을 추가해 보겠습니다.

<button id="addRevenue">Add Revenue</button>  


이 버튼에 클릭 이벤트 처리기를 위한 함수를 작성하여 행을 추가하고 약간의 데이터를 추가하기 위한 준비 작업으로 이전 행에서 스타일을 복사할 수 있습니다.

스타일을 복사하려면 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 함수를 사용할 수 있습니다. 이를 통해 다음과 같이 행 인덱스, 열 인덱스, 값을 전달하여 Spread에서 시트에 값을 설정할 수 있습니다.

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에서 파일을 로드하는 경우 어떤 브라우저에서도 문제없이 열려야 합니다.

img


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 type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />  


그런 다음, 아래와 같이 이 함수를 호출하는 버튼을 추가할 수 있습니다.

<button id="export">Export File</button>  
document.getElementById("export").onclick = function () {  
   ExportFile();  
}  


img


수익 행을 추가한 후에 파일 내보내기 버튼을 사용해 파일을 내보낼 수 있습니다. FileSaver 외부 라이브러리를 추가하여 사용자가 원하는 곳에 파일을 저장할 수 있게 해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>  


파일을 성공적으로 내보낸 후에 Excel에서 파일을 열어 우리가 추가한 수익선이 있는 것을 제외하고는 파일이 가져왔을 때와 같은 모습인지 확인할 수 있습니다.

img


이것은 SpreadJS JavaScript 스프레드시트를 사용해 Excel 파일에 데이터를 추가한 다음, 간단한 JavaScript 코드를 이용해 다시 Excel로 내보내는 방법을 보여주는 한 가지 예시일 뿐입니다.

여기에서 샘플을 다운로드하십시오.

다른 문서 시리즈에서는 다른 Javascript 프레임워크에서 Excel 스프레드시트를 가져오고 내보내는 방법을 안내합니다.




지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.