Excelのインポートまたはエクスポート

このトピックでは、FlexGridコンテンツをExcelのxlsxファイルにエクスポートまたはインポートする方法を示します。FlexGridコンテンツをExcel形式にエクスポートするには、FlexGridインスタンスをFlexGridXlsxConverter.saveメソッドに渡します。これにより、xlsxファイルコンテンツが生成され、このコンテンツをローカルファイルに保存したり、サーバーに送ることができます。Excel（xlsxファイル）コンテンツをFlexGridコントロールにインポートするには、FlexGridインスタンスとxlsxファイルコンテンツをFlexGridXlsxConverter.loadメソッドに渡します。この例では、「クイックスタート」でアプリケーションに追加したSale.csモデルを使用します。

次のコード例は、FlexGridコンテンツとExcel xlsxファイル間でエクスポートまたはインポートする方法を示します。

Controller コード

C#	コードのコピー
private static List<Sale> Sales = Sale.GetData(50).ToList<Sale>(); public IActionResult ExcelImportExport() { return View(Sales); }

View コード

CSHTML	コードのコピー
@model IEnumerable<Sale> <!-- FlexGridをExcelxlsxファイルとの間でインポートおよびエクスポートするためのSheetJSライブラリリファレンス。 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script> function ImportExcel() { var grid = wijmo.Control.getControl("#flexGrid"); var file = document.getElementById("importExcel").files[0]; var includeHeader = document.getElementById("importHeader").checked; wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, file , { includeColumnHeaders: includeHeader }); } function ExportExcel() { var grid = wijmo.Control.getControl("#flexGrid"); var exportHeader = document.getElementById("exportHeader").checked; wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeColumnHeaders: exportHeader }, "FlexGrid.xlsx"); } </script> <div> Headers Import/Export <br /> <div> <input type="checkbox" id="importHeader" /><label for="importHeader">列ヘッダーのインポート</label><br /> <input type="checkbox" id="exportHeader" /><label for="exportHeader">列ヘッダーのエクスポート</label> </div> <div> Excelをインポートする<br /> <div> <input type="file" id="importExcel" /><button onclick="ImportExcel()">Excelをインポートする</button> </div> </div> <div> Excelをエクスポートする<br /> <button onclick="ExportExcel()">Excelをエクスポートする</button> </div> </div> <c1-flex-grid id="flexGrid" auto-generate-columns="false" height="500px"> <c1-items-source initial-items-count="500" source-collection="Model"></c1-items-source> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="開始日" header="Start Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="終了日" header="End Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="国名"></c1-flex-grid-column> <c1-flex-grid-column binding="製品名"></c1-flex-grid-column> <c1-flex-grid-column binding="色"></c1-flex-grid-column> <c1-flex-grid-column binding="金額" format="c" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="金額2" header="Pending" format="c2" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="割引" format="p1" aggregate="Avg"></c1-flex-grid-column> <c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column> </c1-flex-grid>

CSHTML

コードのコピー

@model IEnumerable<Sale>

<!-- FlexGridをExcelxlsxファイルとの間でインポートおよびエクスポートするためのSheetJSライブラリリファレンス。 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script>
    function ImportExcel() {
        var grid = wijmo.Control.getControl("#flexGrid");
        var file = document.getElementById("importExcel").files[0];
        var includeHeader = document.getElementById("importHeader").checked;
        wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, file , { includeColumnHeaders: includeHeader });
    }
    function ExportExcel() {
        var grid = wijmo.Control.getControl("#flexGrid");
        var exportHeader = document.getElementById("exportHeader").checked;
        wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeColumnHeaders: exportHeader }, "FlexGrid.xlsx");
    }
    
</script>
<div>
    Headers Import/Export
    <br />
    <div>
        <input type="checkbox" id="importHeader" /><label for="importHeader">列ヘッダーのインポート</label><br />
        <input type="checkbox" id="exportHeader" /><label for="exportHeader">列ヘッダーのエクスポート</label>
    </div>
    <div>
        Excelをインポートする<br />
        <div>
            <input type="file" id="importExcel" /><button onclick="ImportExcel()">Excelをインポートする</button>
        </div>
    </div>
    <div>
        Excelをエクスポートする<br />
        <button onclick="ExportExcel()">Excelをエクスポートする</button>
    </div>
</div>

<c1-flex-grid id="flexGrid" auto-generate-columns="false" height="500px">
    <c1-items-source initial-items-count="500" source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="開始日" header="Start Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="終了日" header="End Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="国名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="製品名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="色"></c1-flex-grid-column>
    <c1-flex-grid-column binding="金額" format="c" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="金額2" header="Pending" format="c2" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="割引" format="p1" aggregate="Avg"></c1-flex-grid-column>
    <c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column>
</c1-flex-grid>