JavaScript로 Excel 가져오기 및 내보내기 구현하기

추천1

페이지 정보

작성자 GrapeCity

작성일 2020-02-12 00:00 조회 12,549회 댓글 0건

본문

첨부파일

SpreadJS-ExcelIO.zip (39.3K)

관련링크

JavaScript는 클라이언트 측 스크립팅 도구를 쉽게 사용자 정의 할 수 있는 다목적 플랫폼입니다. 일부 애플리케이션에서는 코딩 및 유지 관리가 쉬운 일종의 스프레드시트 인터페이스가있는 것이 유용합니다. 클라이언트 측 JavaScript 스프레드시트 컴포넌트인 SpreadJS가 이에 적합합니다.

Excel로 JavaScript 내보내기

Excel 파일을 가져오고 내보낼 수 있으며 순수 JavaScript로 파일과 상호 작용할 수 있는 인터페이스를 사용자에게 제공할 수 있습니다. 이 포스팅에서는 SpreadJS 컴를 HTML 페이지에 추가하고 Excel 파일을 가져 오는 것이 얼마나 쉬운지 보여 드리겠습니다.

<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 템플릿을 사용하는 로컬 파일을 가져옵니다.

<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 템플릿>

<매출 행을 추가 할 수 있는 버튼이 있는 페이지>

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();  
}

<Excel 파일을 가져오고 편집 한 후 완료된 페이지>

매출 행을 추가하면 파일 내보내기 버튼을 사용하여 파일을 내보낼 수 있습니다 . 사용자가 원하는 위치에 파일을 저장할 수 있도록 FileSaver 외부 라이브러리 를 추가합니다.

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

파일이 성공적으로 내보내지면, Excel에서 그 파일을 열 수 있고, 그 파일이 가져와졌을 때처럼 동작하는 것을 볼 수 있습니다. 단, 우리가 추가한 매출 행이 존재합니다.

<내보낸 파일을 Excel로 가져오기>

지금까지 SpreadJS JavaScript 스프레드시트를 사용하여 Excel 파일에 데이터를 추가한 다음 간단한 JavaScript 코드를 사용하여 Excel로 다시 내보낼 수 있는 방법에 대해 살펴 보았습니다.

다른 포스팅에서는 다른 Javascript 프레임워크에서 Excel 스프레드시트를 내보내는 방법을 보여줍니다.

#JavaScript #ExcelIO

댓글목록

등록된 댓글이 없습니다.

JavaScript로 Excel 가져오기 및 내보내기 구현하기 > 블로그 & Tips

MESCIUS 포럼

MESCIUS 커뮤니티

MESCIUS 포럼

MESCIUS 커뮤니티

SpreadJS

블로그 & Tips