Client-side Loading and Saving of Excel

In This Topic

FlexSheet supports loading data in it from an Excel file or workbook provided by client. Moreover, it allows saving the data in FlexSheet to Excel file or workbook on client-side.

The following code examples demonstrate how to enable client loading of excel in FlexSheet. In the below example, client loading of excel occurs on button click. Load method is called when a user clicks on the button to load excel data in FlexSheet.

Note that FlexSheet requires jszip.min.js file for loading and saving of excel on the client side. Therefore, you need to add this file to your application and provide reference to it in the respective view or in <head> section of _Layout.cshtml file.

In Code

ClientLoadController.cs

C#	Copy Code
public class ClientLoadController : Controller { // GET: /<controller>/ public ActionResult Index() { return View(); } }

ClientLoad.cshtml

Razor	Copy Code
@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

Copy Code

@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>

Saving FlexSheet Data to Excel File on Client-side

Saving the FlexSheet data to an Excel file or workbook is also supported on the client side. This can be accomplished through save method. The following code examples demonstrate how to enable saving FlexSheet data to Excel file on the client side. In the below example save method is invoked on button click.

In Code

ClientSaveController.cs

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

ClientSaving.cshtml

Razor	Copy Code
@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()">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

Copy Code

@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()">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>

wijmo.grid.sheet

wijmo.grid.sheet Module

Reference

FlexSheet Class

Sheet Class