3つの簡単なステップでグリッドをExcelにエクスポート

Web アプリケーションプロジェクトでは、グリッドを Excel ファイルにエクスポートすることは、最も頻繁な要件の 1 つです。これを行うにはさまざまな方法がありますが、IgniteUIは非常に簡単です。必要なのは1行のコードだけです!

Dhananjay Kumar Last Updated Feb 25, 2025 7min read

Web アプリケーションプロジェクトでは、グリッドを Excel ファイルにエクスポートすることは、最も頻繁な要件の 1 つです。これを行うにはさまざまな方法がありますが、IgniteUIを使用すると簡単になります。必要なのは1行のコードだけです!

この投稿では、次のことを学びます。

Create a grid
グリッドを Excel ファイルにエクスポートする
ページネーションなどの機能が有効になっているグリッドをExcelファイルにエクスポートする

Let’s get started.

参照の追加

IgniteUI コントロールを操作するには、まず必要な JavaScript と CSS の参照を追加する必要があります。では、まずはそこから始めましょう。参照を追加するには、次の3つのオプションがあります。

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

次に、2つの要素を持つ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ファイルはデフォルトの名前で保存されます。希望の名前でExcelファイルをダウンロードする場合は、以下のリストに示すようにfilenameプロパティ値を設定する必要があります。

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

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

有効な機能を持つグリッドのエクスポート

これまでは、単純なグリッドをエクスポートしてきましたが、グリッドでページング、ソート、フィルタリングなどの多くの機能が有効になっているシナリオがあるかもしれません。 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 コントロールとその機能について説明する今後の投稿にご注目ください。読んでくれてありがとう。

操作方法