[Wijmo 시작하기] FlexGrid 사용법 - 활용편(2) > 온라인 스터디

기초튜토리얼 [Wijmo 시작하기] FlexGrid 사용법 - 활용편(2)

추천0

페이지 정보

작성자 GCK루시

작성일 2023-03-17 09:35 조회 461회 댓글 0건

본문

관련링크

Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.

Wijmo는 고속 · 경량의 다기능 데이터 그리드 컨트롤인 " FlexGrid (플렉스 그리드) "컨트롤을 지원하고 있습니다. 이번 포스팅에서는 FlexGrid 컨트롤로 Excel 파일을 가져오고 내보내는 방법과 PDF 파일을 내보내는 방법에 대해 소개하도록 하겠습니다.

1. 개발 환경 준비

2. Wijmo 참조 설정

3. FlexGrid 컨트롤 작성

1) Excel 파일 내보내기

2) Excel 파일 가져오기

3) PDF 파일 내보내기

4. 마치며

개발 환경 준비

이번 포스팅에서는 아래 다음 개발 환경을 사용하였습니다.

더불어 이번 포스팅에서 사용할 파일은 아래와 같습니다.

index.html	페이지 메인. 페이지의 요소로 FlexGrid를 배치합니다.
app.js	FlexGrid의 다양한 기능을 구현하기 위한 코드를 입력합니다.
data.js	FlexGrid 컨트롤에 바인딩할 데이터를 입력합니다.
style.css	FlexGrid나 각종 페이지 요소의 스타일 정의를 합니다.

Wijmo 참조 설정

FlexGrid 컨트롤의 기능을 사용하는 데 필요한 Wijmo 모듈 등에 대한 참조 설정은 「index.html」에서 수행됩니다. 또한, FlexGrid 컨트롤의 각종 설정을 입력하는 「app.js」와 데이터를 설정하는 「data.js」의 참조도 여기에 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGrid 컨트롤 활용편（2）</title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>

<body>
    <div id="Wijmo_FlexGrid"></div>
</body>

</html>

또한 페이지의 요소 스타일을 「styles.css」로 정의합니다.

#Wijmo_FlexGrid{
    border: 1px solid gray;
    width: 800px;
}


fieldset{
    border: 1px solid gray;
    width: 520px;
}

FlexGrid 컨트롤 만들기

이제「app.js」와「data.js」에 아래 코드를 작성하여 FlexGrid 컨트롤을 생성합니다. 해당 코드의 경우 초기 상태의 최소한의 설정만 정의되어 있으며 순차적으로 FlexGrid 컨트롤의 기능을 사용하기 위한 코드를 추가하도록 하겠습니다.

app.js

document.addEventListener("DOMContentLoaded", function () {
    InitializeGrid()
});

function InitializeGrid(){

    // FlexGrid 생성
    const data = getData();
    const grid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
        itemsSource: data,
        columns: [
            { binding: 'No', header: 'No' },            
            { binding: '상품명', header: '상품명', width: 246 },
            { binding: '주문날짜', header: '주문날짜' },
            { binding: '금액', header: '금액' },
            { binding: '할인', header: '할인' },
        ]
    });
}

data.js

function getData() {
    return[
        {'No': 0, '상품명': '아메리카노', '주문날짜': '2017/11/18', '금액': 6400, '할인': true},
        {'No': 1, '상품명': '사과주스', '주문날짜': '2019/11/14', '금액': 1760, '할인': true},
        {'No': 2, '상품명': '마끼야또', '주문날짜': '2017/06/04', '금액': 25200, '할인': true},
        {'No': 3, '상품명': '카페라떼', '주문날짜': '2020/10/16', '금액': 11200, '할인': false},
        {'No': 4, '상품명': '포도주스', '주문날짜': '2020/05/17', '금액': 42500, '할인': false},
        {'No': 5, '상품명': '오렌지주스', '주문날짜': '2017/09/16', '금액': 41600, '할인': false},
        {'No': 6, '상품명': '콜드브루', '주문날짜': '2019/08/09', '금액': 36400, '할인': false},
        {'No': 7, '상품명': '오렌지주스', '주문날짜': '2017/10/10', '금액': 2600, '할인': false},
        {'No': 8, '상품명': '요거트', '주문날짜': '2019/02/02', '금액': 8700, '할인': false},
        {'No': 9, '상품명': '오렌지주스', '주문날짜': '2017/09/22', '금액': 10400, '할인': false}
    ];
}

이제 FlexGrid 컨트롤을 생성하고 데이터를 바인딩할 수 있습니다.

1) Excel 파일 내보내기

그 다음으로 FlexGrid 컨트롤에 설정한 내용을 Excel 파일로 내보내는 방법에 대해 소개하도록 하겠습니다.

FlexGrid 컨트롤의 내용을 Excel 파일로 내보내기 위해 아래 Wijmo 모듈에 대한 참조를「index.html」에 추가해주셔야 합니다.

wijmo.xlsx.min.js
wijmo.grid.xlsx.min.js

또한 확장자가 ".xlsx"인 Excel 파일은 ZIP 형식으로 압축되어 있으므로 처리를 위해 "jszip.min.js"에 대한 참조도 추가합니다.

JSZip

또한 Excel 출력 처리를 수행하기 위해 Excel 내보내기 버튼을 추가합니다. 아래 「index.html」에 추가된 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGrid 컨트롤 활용편（2)></title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.xlsx.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.grid.xlsx.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>

</head>

<body>

    <div>
        <fieldset>
            <legend>Excel 가져오기/내보내기</legend>
            <button id="saveExcel">Excel 내보내기</button>
        </fieldset>
    </div>
    <br/>
    <div id="Wijmo_FlexGrid"></div>

</body>

</html>

Excel 파일로 내보내기는, "wijmo.grid.xlsx.FlexGridXlsxConverter"클래스의 "saveAsync" 메서드를 호출하여 수행됩니다. 여기에서 FlexGrid 컨트롤의 내용을 Excel 파일에 출력하기 위한 최소한의 인자만을 "saveAsync" 메서드에 설정하고 있습니다. 해당 메서드에 추가로 설정할 수 있는 항목은 데모 및 "saveAsync" API를 참조하시길 바랍니다.

「app.js」에 추가할 코드는 다음과 같습니다.

function InitializeGrid(){

    // FlexGrid 생성

・・・（생략）

    // Excel 파일로 내보내기
    document.querySelector('#saveExcel').addEventListener('click', e => {
        wijmo.grid.xlsx.FlexGridXlsxConverter.saveAsync(grid, null, 'test.xlsx');
    });
}

「index.html」과「app.js」에 위의 코드를 추가하여 실행한 결과는 아래와 같습니다.

그 다음으로, [Excel 내보내기] 버튼을 누르면 "test.xlsx" 파일이 생성되어 클라이언트 측으로 다운로드 됩니다.

2) Excel 파일 가져오기

Excel 파일을 FlexGrid 컨트롤로 가져와서 표시하는 경우에도 위의 모듈을 동일하게 사용합니다.

여기에서는 Excel 파일을 가져오기 위해 Excel 가져오기 버튼과 "type=file" 입력 태그를 추가합니다. 이 입력 태그로 파일을 지정한 후 [Excel 가져오기] 버튼을 누르면 Excel 파일을 FlexGrid 컨트롤로 가져올 수 있습니다.

index.html의 fieldset 태그를 다음과 같이 다시 작성합니다.

・・・（생략）

<fieldset>
    <legend>Excel 가져오기/내보내기</legend>
    <button id="saveExcel">Excel 내보내기</button>
    <button id="loadExcel">Excel 가져오기</button>
    <input type="file" id="filePath" accept=".xlsx">
</fieldset>

・・・（생략）

「app.js」에는 아래 코드를 추가하여 [Excel 가져오기] 버튼을 누를 때 wijmo.grid.xlsx.FlexGridXlsxConverter 클래스의 "loadAsync" 메서드가 실행되도록 합니다. "loadAsync" 메서드의 인자에 설정할 수 있는 항목에 대해서는 데모 및 "loadAsync" API를 참조하시길 바랍니다.

function InitializeGrid(){

        // FlexGrid 생성
    ・・・（생략）
    
        // Excel 파일로 내보내기
    
    ・・・（생략）
    
    // Excel 파일 가져오기
    document.querySelector('#loadExcel').addEventListener('click', e => { 
        const targetFile = document.querySelector('#filePath').files[0];

        if (targetFile) {
            wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(grid, targetFile, { 
                includeColumnHeaders: false,
                includeRowHeaders: false
            });
        }
    });
}

작성한 결과 페이지는 다음과 같습니다.

동작 확인을 위해 다음과 같은 Excel 파일을 불러보도록 하겠습니다.

파일 선택 버튼을 누르고 표시된 탐색기에서 Excel 파일을 지정한 다음 Excel 가져오기 버튼을 누르면 선택한 Excel 파일의 내용이 FlexGrid 컨트롤에 로드됩니다.

3) PDF 파일 내보내기

마지막으로 FlexGrid 컨트롤에 설정한 내용을 PDF 파일로 내보내는 방법을 소개합니다.

FlexGrid 컨트롤의 내용을 PDF 파일을 내보내기 위해,

아래의 Wijmo의 모듈의 참조를 「index.html」에 추가해주셔야 합니다.

wijmo.pdf.min.js
wijmo.grid.pdf.min.js

그 다음 PDF 내보내기 과정을 수행하기 위해 버튼을 「index.html」에 아래와 같이 추가해 줍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGrid 컨트롤 활용편（2)></title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.pdf.min.js"></script>
    <script src="scripts/wijmo.xlsx.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.grid.xlsx.min.js"></script>
    <script src="scripts/wijmo.grid.pdf.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>

</head>

<body>

    <div>
        <fieldset>
            <legend>Excel 가져오기/내보내기</legend>
            <button id="saveExcel">Excel 내보내기</button>
            <button id="loadExcel">Excel 가져오기</button>
            <input type="file" id="filePath" accept=".xlsx">
        </fieldset>
        <fieldset>
            <legend>PDF 내보내기</legend>
            <button id="savePDF">PDF 내보내기</button>
        </fieldset>
    </div>
    <br/>
    <div id="Wijmo_FlexGrid"></div>

</body>

</html>

「app.js」에는 아래와 같은 코드를 추가합니다.

"wijmo.grid.pdf.FlexGridPdfConverter" 클래스의 "export" 메서드의 인자에 설정할 수 있는 항목에 대해서는, 데모와 "export" API를 참조해 주시기 바랍니다.

function InitializeGrid(){

    // FlexGrid 생성
・・・（생략）

    // Excel 파일로 내보내기

・・・（생략）

     // Excel 파일 가져오기

・・・（생략）

    // PDF 파일로 내보내기
    document.querySelector('#savePDF').addEventListener('click', e => {
        wijmo.grid.pdf.FlexGridPdfConverter.export(grid, 'test.pdf', {
            embeddedFonts: [{
                 source: 'https://assets.codepen.io/975719/BMHANNAPro.ttf',
                 name: 'BMHANNAPro' 
            }],
            styles: { cellStyle: { font: { family: 'BMHANNAPro' } } }
        });
    });
}

위의 코드는 한국어를 내보낸 PDF 파일에 적절하게 표시하기 위해 별도 글꼴(BMHANNAPro.ttf)을 설정한 코드입니다. 관련하여 자세한 설명은 아래 포스팅 링크를 방문하셔서 확인하여 주시기 바랍니다.

FlexGrid를 PDF로 내보낼 때 한글 폰트를 적용하는 방법

결과 페이지는 아래와 같습니다.

[PDF 내보내기] 버튼을 누르면 "test.pdf" 파일이 생성되어 클라이언트 측으로 다운로드 됩니다.

이번에 소개한 각종 설정은 아래의 데모에서도 확인할 수 있습니다.

더불어 Excel 가져오기/내보내기나 PDF 내보내기의 기능에 대한 API 레퍼런스 및 데모도 제공하고 있으니 아래 링크를 참고하여 주시기 바랍니다.

API 참조

데모

마치며

이번에는 Wijmo FlexGrid 컨트롤의 Excel 가져오기/내보내기 및 PDF 파일로 내보내기 방법에 대해 소개했습니다. Wijmo에는 FlexGrid 컨트롤 외에도 FlexSheet, MultiRow, TransposedGrid, TransposedMultiRow 등 다양한 그리드 컨트롤이 준비되어 있으니 다양한 애플리케이션에 최적의 그리드 기능을 제공하는 Wijmo를 이용하여 개발해보시기 바랍니다.

다음 포스팅에서는 Input 컨트롤의 기본 기능 사용 방법에 대해 소개하도록 하겠습니다.

다음 시리즈 글도 기대해주세요!

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