基本的なエクスポート

exportGrid メソッドには、以下に示す 4 つのパラメータがあります。このうち、fileName だけは必ず値を指定する必要があります。

この 4 つのパラメータで可能となる以上のカスタマイズを実現するには、wijmo.exporter.exportGrid メソッドを使用します。

fileName

エクスポートするファイルの名前に使用する文字列値を指定します。デフォルトでは、エクスポートしたファイルは、このパラメータに指定したファイル名と type パラメータに指定したファイル拡張子よって、ダウンロードフォルダに保存されます。

type

デフォルトでは、exportGrid によって XLS ファイルが生成されます。ただし、以下の 3 つの Excel タイプと 1 つのドキュメントタイプから、任意のタイプを指定することもできます。

xls （デフォルト）どのバージョンの Excel でも開くことのできるスプレッドシートを作成します。
xlsx Excel 2007 以上で開くことのできるスプレッドシートを作成します。
csv 値がコンマで区切られたファイルを作成します。csv ファイルは、Excel または任意のテキストエディタで開くことができます。
pdf Adobe Reader で開くことのできる、移植可能なドキュメントが生成されます。Adobe Reader は印刷に適しますが、ユーザーがファイル内のデータを操作することはできません。

serviceUrl

機能をすぐに使用できるように、デフォルトではこのパラメータは、あらかじめセットアップされた次のデモ用エクスポートサービスにポイントされています。

http://demos.componentone.com/ASPNET/ExportService/exportapi/grid

IIS v7.0 以上であれば、独自のエクスポートサービスをインストールできます。詳細については、「エクスポートサービスのセットアップ」を参照してください。

pdfSettings

このパラメータは、type パラメータを pdf に設定した場合にのみ適用されます。詳細については、「PDF としてエクスポート」を参照してください。

サンプル

次のサンプルコードでは、<input> ボタン要素のボタンクリック機能を作成します。ボタンをクリックするとグリッドが呼び出され、「MyGridExport」という名前の XLS ファイルとしてエクスポートされます。"

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid", "gridexport"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number"}, {headerText: "Country"}, {headerText: "Player"}, {headerText: "Position"} ] }); }); $("#exportXLS").button().click(function () { wijmo.exporter.exportGrid({ serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid", grid: $("#wijgrid").data("wijmo-wijgrid"), fileName: "MyGridExport" }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijgrid", "gridexport"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Country"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    $("#exportXLS").button().click(function () {
        wijmo.exporter.exportGrid({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid",
            grid: $("#wijgrid").data("wijmo-wijgrid"),
            fileName: "MyGridExport"
        });
    });
});
</script>

実際のウィジェット

上記のサンプルコードを実行すると、次のようになります。［Export to Excel］ボタンをクリックすると、ダウンロードディレクトリに MyGridExport.xls ファイルが作成されます。