Export to XLSX
To export FlexGrid controls to the XLSX format, you should include following extra modules in your application:
- jszip.js: Javascript library for creating, reading and editing ZIP files.
To export FlexGrid to XLSX, call the FlexGridXlsxConverter.save method to obtain a 'book' object. You may modify the book object before saving it. For example, you may add or rename sheets. Once the 'book' is ready, call its save method to create the XLSX file.
ID
Country
Sales
Expenses
0
US
81,732.54
38,401.13
1
Germany
20,603.32
27,944.24
2
UK
44,217.79
48,877.49
3
Japan
29,190.63
23,365.74
4
Italy
46,951.19
49,107.56
5
Greece
86,237.02
49,767.35
ID
Country
Sales
Expenses
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // This file locates: "Scripts/Lesson/C1FlexGrid/Excel.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( '#theGrid' ); // export grid to XLSX document.getElementById( 'btnExport' ).addEventListener( 'click' , function () { // create book with current view var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(theGrid, { includeColumnHeaders: true , includeRowHeaders: true }); book.sheets[0].name = 'Learn MVC Client' ; // save the book book.save( 'LearnMvcClient.xlsx' ); }) }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: Excel public ActionResult Excel() { return View(Models.FlexGridData.GetSales()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1FlexGrid.Excel_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.Excel_Text1) </ p > < ol > < li > @Html .Raw(Resources.C1FlexGrid.Excel_Text2) </ li > </ ol > < p > @Html .Raw(Resources.C1FlexGrid.Excel_Text3) </ p > < button id = "btnExport" class = "btn btn-default" > @Html .Raw(Resources.C1FlexGrid.Excel_Text4) </ button > @ (Html.C1().FlexGrid().Id( "theGrid" ) .Bind(Model) .AutoGenerateColumns( false ) .Columns(cs=> { cs.Add().Binding( "Id" ).Header( "ID" ).Width( "60" ); cs.Add().Binding( "Country" ).Header( "Country" ).Width( "2*" ); cs.Add().Binding( "Sales" ).Header( "Sales" ).Width( "*" ).Format( "n2" ); cs.Add().Binding( "Expenses" ).Header( "Expenses" ).Width( "*" ).Format( "n2" ); }) .Height(250) .Filterable() // add a filter to show that it works while exporting ) @section Scripts{ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"> </script> } |