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

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

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

参照の追加

以下のコードを実装する前に、FlexGridをExcel xlsxファイルとの間でインポートおよびエクスポートするには、jszip.min.jsライブラリの参照を追加する必要があります。

_Layout.cshtml

HTML	コードのコピー
<!-- SheetJS library --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js"></script>

HomeController.cs

C#	コードのコピー
public ActionResult Index() { return View(Sale.GetData(500)); }

App.js

JavaScript	コードのコピー
//コントロールの宣言 var gFlexGrid = null, IncludeHeadersExport = null, IncludeHeadersImport = null; //コントロールの初期化 function InitialControls() { gFlexGrid = wijmo.Control.getControl("#gFlexGrid"); IncludeHeadersImport = document.getElementById('IncludeHeadersImport'); IncludeHeadersExport = document.getElementById('IncludeHeadersExport'); } // エクスポート function exportExcel() { if (gFlexGrid) { wijmo.grid.xlsx.FlexGridXlsxConverter.save(gFlexGrid, { includeColumnHeaders: IncludeHeadersExport.checked }, 'FlexGrid.xlsx'); } }; // インポート function importExcel() { if (gFlexGrid) { if ($('#importFile')[0].files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.load(gFlexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: IncludeHeadersImport.checked }); } else { alert('Select an Excel file to Import.'); } } };

JavaScript

コードのコピー

//コントロールの宣言
var gFlexGrid = null,
    IncludeHeadersExport = null,
    IncludeHeadersImport = null;

//コントロールの初期化
function InitialControls() {
    gFlexGrid = wijmo.Control.getControl("#gFlexGrid");
    IncludeHeadersImport = document.getElementById('IncludeHeadersImport');
    IncludeHeadersExport = document.getElementById('IncludeHeadersExport');
}

// エクスポート
function exportExcel() {
    if (gFlexGrid) {
        wijmo.grid.xlsx.FlexGridXlsxConverter.save(gFlexGrid, { includeColumnHeaders: IncludeHeadersExport.checked }, 'FlexGrid.xlsx');
    }
};

// インポート
function importExcel() {
    if (gFlexGrid) {
        if ($('#importFile')[0].files[0]) {
            wijmo.grid.xlsx.FlexGridXlsxConverter.load(gFlexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: IncludeHeadersImport.checked });
        }
        else {
            alert('Select an Excel file to Import.');
        }
    }
};

Index.cshtml

Razor	コードのコピー
@using C1MVCExcelImportExport.Models @using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ViewBag.Title = "ComponentOne ASP.NET MVC Excel Import Export"; Layout = "~/Views/Shared/_Layout.cshtml"; } <!-- App scripts --> <script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="form-inline well well-lg"> <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> <button class="btn btn-default" onclick="importExcel()">インポート</button> <br /> <div class="checkbox"> <label> <input id="IncludeHeadersImport" type="checkbox" checked="checked"> Include Column Headers </label> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="form-inline well well-lg"> <a href="#" class="btn btn-default" id="export" onclick="exportExcel()">エクスポート</a> <div class="checkbox"> <label> <input id="IncludeHeadersExport" type="checkbox" checked="checked"> 列のヘッダを含む </label> </div> </div> </div> </div> <div class="row"> @(Html.C1().FlexGrid().Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true) .("max-height", "400px").IsReadOnly(true) Bind(bl => bl.DisableServerRead(true).Bind(Model)).CssClass("grid") Columns(bl => { bl.Add(cb => cb.Binding("Country").Header("Country").Width("")); bl.Add(cb => cb.Binding("Product").Header("Product").Width("")); bl.Add(cb => cb.Binding("Color").Header("Color").Width("")); bl.Add(cb => cb.Binding("Start").Header("Start").Width("")); bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*") .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum)); }) ) </div> </div> <script type="text/javascript"> c1.documentReady(function () { if (window["InitialControls"]) { window["InitialControls"](); } }); </script>

Razor

コードのコピー

@using C1MVCExcelImportExport.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

@{
    ViewBag.Title = "ComponentOne ASP.NET MVC Excel Import Export";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!-- App scripts -->
<script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="form-inline well well-lg">
                <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
                <button class="btn btn-default" onclick="importExcel()">インポート</button>
                <br />
                <div class="checkbox">
                    <label>
                        <input id="IncludeHeadersImport" type="checkbox" checked="checked"> Include Column Headers
                    </label>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="form-inline well well-lg">
                <a href="#" class="btn btn-default" id="export" onclick="exportExcel()">エクスポート</a>
                <div class="checkbox">
                    <label>
                        <input id="IncludeHeadersExport" type="checkbox" checked="checked"> 列のヘッダを含む
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
@(Html.C1().FlexGrid().Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true)
.("max-height", "400px").IsReadOnly(true)
Bind(bl => bl.DisableServerRead(true).Bind(Model)).CssClass("grid")
Columns(bl =>
        {
        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb => cb.Binding("Product").Header("Product").Width("*"));
        bl.Add(cb => cb.Binding("Color").Header("Color").Width("*"));
        bl.Add(cb => cb.Binding("Start").Header("Start").Width("*"));
        bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*")
        .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum));
        })
)
    </div>
</div>

<script type="text/javascript">
    c1.documentReady(function () {
        if (window["InitialControls"]) {
            window["InitialControls"]();
        }
    });
</script>