Premium

Blazor Grid エクスポート

Ignite UI for Blazor Grid は、Grid Toolbar Exporter コンポーネントを介してデータエクスポート機能を提供します。表示されたデータを Excel、CSV、または PDF 形式でエクスポートできます。Excel エクスポートは、フィルタリングやソートなどの機能をサポートする MS Excel テーブル形式を使用します。エクスポートを有効にするには、IgbGridToolbarExporter をグリッドのツールバー内に配置します。デフォルトでは、すべてのエクスポート形式が有効になっています。

Blazor エクスポートの例

複数列ヘッダーグリッドのエクスポート

定義された複数列ヘッダーを使用して IgbGrid をエクスポートできます。すべてのヘッダーは、IgbGrid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、ExporterOption IgnoreMultiColumnHeaders を true に設定できます。

固定された列ヘッダーを使用してグリッドをエクスポートする

デフォルトでは、Excel エクスポーターサービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。多くのシナリオでは、エクスポートされた Excel ファイルの上部にすべてのヘッダーを固定し、ユーザーがレコードをスクロールしても常に表示されるようにしたい場合があります。これを実現するには、ExporterOption FreezeHeaders を true に設定します。

PDF エクスポートには、ドキュメントの上部に列ヘッダー行が自動的に含まれるため、読者がファイルを開いたり印刷したりしても同じコンテキストが保持されます。

IgbGridToolbarExporter is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:

export-excel, export-csv, export-pdf
exportExcel, exportCsv, exportPdf
ExportExcel, ExportCsv, ExportPdf

エクスポートするコンテンツのカスタマイズ

上記の例では、Excel Exporter サービスはすべての使用可能なデータをエクスポートします。行または列全体のエクスポートをしない方が良い場合があります。これを実現するには、それぞれ各列と各行に対して発生する columnExporting および rowExporting イベントをサブスクライブし、イベント引数オブジェクトの cancel プロパティを true に設定してイベントをキャンセルします。

以下の例では、ヘッダーが「Age」で、インデックスが 1 の場合、エクスポートから列を除外します。

 <IgbGrid>
    <IgbGridToolbar>
      <IgbGridToolbarActions>
        <IgbGridToolbarExporter
          ExportExcel="true" ExportStartedScript="WebGridExportEventFreezeHeaders">
        </IgbGridToolbarExporter>
      </IgbGridToolbarActions>
    </IgbGridToolbar>
 </IgbGrid>

igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => {
    ev.detail.options.freezeHeaders = false;
}, false);

API リファレンス

IgbExcelExporterService
IgbExcelExporterOptions
PdfExporterService
PdfExporterOptions

その他のリソース

IgbGrid

Additional Resources

Our community is active and always welcoming to new ideas.