간단한 3단계로 그리드를 Excel로 내보내기

웹 응용 프로그램 프로젝트에서 그리드를 Excel 파일로 내보내는 것은 가장 빈번한 요구 사항 중 하나입니다. 이를 수행하는 방법에는 여러 가지가 있지만 IgniteUI를 사용하면 매우 간단합니다. 코드 한 줄만 있으면 됩니다!

Dhananjay Kumar Last Updated Feb 25, 2025 7min read

웹 응용 프로그램 프로젝트에서 그리드를 Excel 파일로 내보내는 것은 가장 빈번한 요구 사항 중 하나입니다. 이를 수행하는 방법에는 여러 가지가 있지만 IgniteUI를 사용하면 간단하게 수행할 수 있습니다. 코드 한 줄만 있으면 됩니다!

이 게시물에서는 다음을 배웁니다.

Create a grid
그리드를 Excel 파일로 내보내기
Pagination과 같은 기능이 활성화된 그리드를 Excel 파일로 내보냅니다.

Let’s get started.

참조 추가

IgniteUI 컨트롤을 사용하려면 먼저 필요한 JavaScript 및 CSS 참조를 추가해야 합니다. 자, 그것부터 시작하겠습니다. 참조를 추가할 수 있는 세 가지 옵션이 있습니다.

IgniteUI를 다운로드하고 필요한 파일을 프로젝트에 추가합니다.
Visual Studio에서 NuGet 패키지를 사용합니다. 프로젝트를 마우스 오른쪽 단추로 클릭하고 NuGet 패키지 관리를 선택합니다. NuGet 패키지 관리자에서 IgniteUI를 검색하고 프로젝트에 IgniteUI 평가판을 설치합니다.
Via CDN: The IgniteUI team provides a public CDN to use.

이 데모에서는 프로젝트의 NuGet 패키지를 사용하여 IgniteUI를 설치했습니다. 아래 목록과 같이 필요한 참조를 추가해야 합니다.

    <link href="Content/Infragistics/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="Content/Infragistics/css/structure/infragistics.css" rel="stylesheet" />


    <script src="scripts/jquery-2.0.3.min.js"></script>
    <script src="scripts/jquery-ui-1.10.3.min.js"></script>

    <script src="scripts/Infragistics/js/infragistics.core.js"></script>
    <script src="scripts/Infragistics/js/infragistics.lob.js"></script>
 
    <script src="scripts/Infragistics/js/modules/infragistics.documents.core.js"></script>
    <script src="scripts/Infragistics/js/modules/infragistics.excel.js"></s cript>
    <script src="scripts/Infragistics/js/modules/infragistics.gridexcelexporter.js"></script>

    <script src="http://www.igniteui.com/js/external/FileSaver.js"></script>
    <script src="http://www.igniteui.com/js/external/Blob.js"></script>
    
    <script src="demo.js"></script>

기본적으로 다음과 같은 참조를 추가하고 있습니다.

IgniteUI CSS 라이브러리
jQuery 라이브러리
jQuery UI 라이브러리
IgniteUI 코어, 개발 및 lob 라이브러리
Excel 내보내기를 위한 IgniteUI 라이브러리

참조를 추가할 때 위의 목록에 표시된 것처럼 동일한 순서를 따라야 한다는 점을 명심하십시오. demo.js 파일에 대한 참조도 추가했음을 알 수 있습니다. 우선, demo.js에는 아래 목록과 같이 함수가 포함되어 있습니다. 이 함수 내부에 필요한 모든 JavaScript 코드를 작성합니다.

$(function () {
    //write ignite code here 
});

jQuery 문서 준비 함수 내에 IgniteUI 코드를 작성하는 또 다른 옵션도 있습니다.

Create HTML

다음으로 두 가지 요소가 있는 HTML 페이지를 만들어 보겠습니다.

igGrid로 변환되는 HTML 테이블
클릭하면 그리드를 Excel로 내보내는 HTML 단추입니다

아래 목록과 같이 HTML을 만들어 보겠습니다.

<body>
    <table id="grid" ></table>  
    <button id="btnExportToExcel" type="button">Export to Excel</button>
</body>

Creating the igGrid

다음에서 데이터를 바인딩하여 igGrid를 생성할 수 있습니다.

백엔드 서버의 JSON 데이터
OData 끝점
로컬 데이터 소스에 바인딩합니다. igGrid는 애플리케이션에서 로컬로 생성된 JSON 객체 배열에 바인딩될 수 있습니다

아래 목록과 같이 JSON 개체 배열 productData를 만들었습니다.

var productData = [
          { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "SafetyStockLevel": 1000 },
          { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "SafetyStockLevel": 1000 },
          { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "SafetyStockLevel": 800 },
          { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "SafetyStockLevel": 800 },
          { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "SafetyStockLevel": 800 },
          { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "SafetyStockLevel": 500 },
          { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "SafetyStockLevel": 500 },
          { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "SafetyStockLevel": 500 },
          { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "SafetyStockLevel": 1000 },
          { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "SafetyStockLevel": 1000 }
    ];

아래 목록과 같이 위의 데이터를 바인딩하고 그리드를 만들 수 있습니다. 기본적으로 HTML 테이블을 선택하고 다양한 속성을 설정하여 igGrid로 변환해야 합니다. 최소 그리드를 만들려면 데이터 소스 속성만 넣어야 합니다. 그러나 여기서는 열 헤더, 기본 키 등과 같은 다른 속성을 설정하고 있습니다.

따라서 아래 목록과 같이 igGrid를 생성할 수 있습니다.

$("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        width: "1500px"
    });

위 목록의 dataSource 속성이 productData JSON 개체 배열로 설정되어 있음을 알 수 있습니다. 다음과 같이 설정할 수 있습니다.

ODATA EndPoint URL
REST service EndPoint returning JSON data
Local JOSN data

igGrid의 dataSource 속성에 설정된 소스 유형에 관계없이 Excel로 내보내는 것은 동일합니다. 이 시점에서 응용 프로그램을 실행할 때 아래 이미지와 같이 그리드와 버튼을 찾을 수 있습니다.

버튼 클릭으로 그리드를 Excel로 내보내야 합니다.

igGrid를 Excel로 내보내기

그리드를 Excel 파일로 내보내는 것은 매우 간단합니다. IgniteUI는 GridExcelExporter.exportGrid 라는 ig 개체에 대한 메소드를 제공했습니다. 이 방법을 사용하여 그리드를 Excel로 내보내야 합니다. 버튼을 클릭하면 아래 목록과 같이 위의 그리드를 Excel로 내보낼 수 있습니다.

   $("#btnExportToExcel").click(function () {

        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"));
    });

눈치채셨겠지만 GridExcelExporter.exportGrid 메소드 내부에 그리드의 ID를 전달하고 있습니다. 지금 엑셀 파일이 기본 이름으로 저장됩니다. 원하는 이름으로 Excel 파일을 다운로드하려면 아래 목록과 같이 filename 속성 값을 설정해야 합니다.

$("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");

        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename"
        });
});

Enabled Features가 있는 그리드 내보내기

지금까지 간단한 그리드를 내보냈지만 그리드에 페이징, 정렬, 필터링 등과 같은 많은 기능이 활성화된 시나리오가 있을 수 있습니다. GridExcelExporter는 기본적으로 기능을 무시하고 전체 그리드를 Excel 파일로 내보냅니다.

아래 목록과 같이 igGrid에서 기능을 활성화했다고 가정해 보겠습니다.

$("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        features: [
                  {
                      name: 'Paging',
                      type: "local",
                      pageSize: 2
                  },
                  {
                      name: "Filtering"
                  },
                  {
                      name: "Sorting"
                  }
        ],
        width: "1500px"
    });

아래 목록과 같이 Excel로 내보내는 동안 이러한 기능을 유지할 수 있습니다. 여기에서는 정렬 및 페이징과 같은 gridFeatureOptions 속성을 설정합니다.

   $("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename",
            gridFeatureOptions: { "sorting": "applied","paging": "currentPage", "summaries": "applied" },
        });
    });

gridFeatureOptions에 대한 값을 설정하지 않으면 기본적으로 그리드 기능을 무시하고 Excel 파일을 내보냅니다. 예를 들어, igGrid는 페이지당 2개의 레코드로 페이지 매김이 활성화되며 총 5개의 페이지가 있습니다. gridFeatureOptions가 설정되지 않은 경우 IgniteUI는 Excel 파일의 10개 레코드를 모두 내보냅니다.

결론

이 게시물은 IgniteUI GridExcelExporter를 사용하여 그리드를 Excel 파일로 내보내는 것이 매우 쉽다는 것을 배웠습니다. 참고로 모든 코드 조각을 함께 넣어 보겠습니다.

$(function () {
   
    var productData = [
         { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "SafetyStockLevel": 1000 },
         { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "SafetyStockLevel": 1000 },
         { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "SafetyStockLevel": 800 },
         { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "SafetyStockLevel": 800 },
         { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "SafetyStockLevel": 800 },
         { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "SafetyStockLevel": 500 },
         { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "SafetyStockLevel": 500 },
         { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "SafetyStockLevel": 500 },
         { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "SafetyStockLevel": 1000 },
         { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "SafetyStockLevel": 1000 }
    ];

// Creating GRID 
    $("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        features: [
                  {
                      name: 'Paging',
                      type: "local",
                      pageSize: 2
                  },
                  {
                      name: "Filtering"
                  },
                  {
                      name: "Sorting"
                  }
        ],
        width: "1500px"
    });

    
    // Exporting to Excel 
    $("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename",
            gridFeatureOptions: { "sorting": "applied","paging": "currentPage", "summaries": "applied" },
        });
    });

});

이 게시물이 도움이 되길 바랍니다! 다른 IgniteUI 컨트롤과 해당 기능을 다룰 향후 게시물을 주시하십시오. 읽어 주셔서 감사합니다.

어떻게