クライアント側のExcelファイルのロードおよび保存

FlexSheetは、クライアントから提供されるExcelファイルまたはワークブックからのデータのロードをサポートします。さらに、FlexSheetのデータをクライアント側のExcelファイルまたはワークブックに保存できます。

次のコード例は、FlexSheetでクライアントからのExcelのロードを行う方法を示します。次の例では、ボタンクリックでクライアントからのExcelのロードが発生します。FlexSheetにExcelデータをロードするためのボタンをユーザーがクリックすると、Loadメソッドが呼び出されます。

クライアント側でExcelをロードおよび保存するには、FlexSheetにjszip.min.jsファイルが必要です。そのため、このファイルをアプリケーションに追加し、各ビューまたは_Layout.cshtmlファイルの<head>セクションにファイルへの参照を提供する必要があります。

コードの場合

ClientLoadController.cs

C#	コードのコピー
public class ClientLoadController : Controller { // GET: /<controller>/ public ActionResult Index() { return View(); } }

ClientLoad.cshtml

Razor	コードのコピー
@using C1MvcFSheetNew.Models; @model IEnumerable<Sale> <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script> function load() { var flex = wijmo.Control.getControl("#clientLoadSheet"); var fileInput = wijmo.getElement('#importFile'); if (flex && fileInput.files[0]) { flex.load(fileInput.files[0]); } } </script> <div> <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> <button class="btn btn-default" onclick="load()">Load</button> <br /><br /> @(Html.C1().FlexSheet().CssClass("flexSheet").Id("clientLoadSheet") .SelectedSheetIndex(0).Width("500px").Height("700px").AddBoundSheet(sheet => sheet.Bind(cv => cv.Bind(Model).DisableServerRead(true))) .AddUnboundSheet("Unbound", 20, 8)) </div>

Razor

コードのコピー

@using C1MvcFSheetNew.Models;
@model IEnumerable<Sale>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script>
        function load() {
            var flex = wijmo.Control.getControl("#clientLoadSheet");
            var fileInput = wijmo.getElement('#importFile');
            if (flex && fileInput.files[0]) {
                flex.load(fileInput.files[0]);
            }
        }
    </script>

    <div>
        <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
        <button class="btn btn-default" onclick="load()">Load</button>
        <br /><br />
        @(Html.C1().FlexSheet().CssClass("flexSheet").Id("clientLoadSheet")
        .SelectedSheetIndex(0).Width("500px").Height("700px").AddBoundSheet(sheet =>
                sheet.Bind(cv =>
                    cv.Bind(Model).DisableServerRead(true)))
        .AddUnboundSheet("Unbound", 20, 8))
        
    </div>

先頭に戻る

クライアント側のExcelファイルへのFlexSheetデータの保存

クライアント側では、ExcelファイルまたはワークブックへのFlexSheetデータの保存もサポートされます。これは、saveメソッドによって行われます。次のコード例は、クライアント側のExcelファイルへのFlexSheetデータの保存を行う方法を示します。次の例では、ボタンクリックによってsaveメソッドが呼び出されます。

コードの場合

ClientSaveController.cs

C#	コードのコピー
public class ClientSaveController : Controller { // GET: /<controller>/ public static List<Sale> SALES = Sale.GetData(50).ToList(); public ActionResult Index() { return View(SALES); }

ClientSaving.cshtml

Razor	コードのコピー
@using MVCFlexSheet.Models; @model IEnumerable<Sale> <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script> function save() { var flex = wijmo.Control.getControl("#clientSaveSheet"); var fileNameInput = wijmo.getElement("#fileName"); var fileName = 'FlexSheet.xlsx'; flex.save(fileName); } </script> <div> <button class="btn btn-default" onclick="save()">保存</button> <br /><br /> @(Html.C1().FlexSheet().CssClass("flexSheet").Id("clientSaveSheet") .SelectedSheetIndex(0).Width("500px").Height("700px").AddBoundSheet(sheet => sheet.Bind(cv => cv.Bind(Model).DisableServerRead(true))) .AddUnboundSheet("Unbound", 20, 8)) </div>

Razor

コードのコピー

@using MVCFlexSheet.Models;
@model IEnumerable<Sale>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script>
        function save() {
            var flex = wijmo.Control.getControl("#clientSaveSheet");
            var fileNameInput = wijmo.getElement("#fileName");
            var fileName = 'FlexSheet.xlsx';
            flex.save(fileName);
        }
    </script>

    <div>
        <button class="btn btn-default" onclick="save()">保存</button>
        <br /><br />        
        @(Html.C1().FlexSheet().CssClass("flexSheet").Id("clientSaveSheet")
        .SelectedSheetIndex(0).Width("500px").Height("700px").AddBoundSheet(sheet =>
                sheet.Bind(cv =>
                    cv.Bind(Model).DisableServerRead(true)))
        .AddUnboundSheet("Unbound", 20, 8))
    </div>

先頭に戻る