クライアント側の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

HTML	コードのコピー
<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 /> <c1-flex-sheet class="flexSheet" id="clientLoadSheet" selected-sheet-index="0" width="500px" height="700px"> <c1-unbound-sheet column-count="8" row-count="20" name="Unbound"></c1-unbound-sheet> </c1-flex-sheet> </div>

HTML

コードのコピー

<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 />
    <c1-flex-sheet class="flexSheet" id="clientLoadSheet" selected-sheet-index="0" width="500px" height="700px">
        <c1-unbound-sheet column-count="8" row-count="20" name="Unbound"></c1-unbound-sheet>
    </c1-flex-sheet>
</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

HTML	コードのコピー
@using C1MvcFSheetNew.Models; @model IEnumerable<sale> <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 /> <c1-flex-sheet class="flexSheet" id="clientSaveSheet" selected-sheet-index="0" width="500px" height="700px"> <c1-bound-sheet> <c1-items-source source-collection="Model"></c1-items-source> </c1-bound-sheet> <c1-unbound-sheet column-count="8" row-count="20" name="Unbound"></c1-unbound-sheet> </c1-flex-sheet> </div>

HTML

コードのコピー

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

    <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 />
        <c1-flex-sheet class="flexSheet" id="clientSaveSheet" selected-sheet-index="0" width="500px" height="700px">
            <c1-bound-sheet>
                <c1-items-source source-collection="Model"></c1-items-source>
            </c1-bound-sheet>
            <c1-unbound-sheet column-count="8" row-count="20" name="Unbound"></c1-unbound-sheet>
        </c1-flex-sheet>
    </div>

先頭に戻る