Excel IO

SpreadJS provides the most complete support for importing and exporting your complex Excel files. Load your most complex Excel files, make changes, and export back to an Excel file or save the data to a database. In-browser Excel Import and Export imports Excel files (.xlsx) into Spread json and exports Spread json to Excel. The Spread JSON makes loading and saving Spread instances easy.

In order to use the ExcelIO feature, you need to add the related js file link into the document's head section below the Spread link. For example: Initialize the workbook and excel IO instance. Then you can use client-side ExcelIO to import excel files(.xlsx) to Spread json or export Spread json to an excel file. You can use the open method of the ExcelIO component to import or use the save method of ExcelIO component to export For example: You can also use Password to open or save a protected Excel file. You just need to pass an options{password:xxxx} to the open and save methods. For example: Set the calcOnDemand property to true to delay calculations on demand and improve import performance. ExcelIO export/import saves the current sheet view position in the exported workbook. It saves the top-left cell of the worksheet as a scroll reference. For example, if the top left cell was A22 when the workbook was saved, the sheet will automatically be scrolled to have that cell at the top left when opened again.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import GC from '@grapecity/spread-sheets'; import '@grapecity/spread-sheets-charts'; import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'; import { IO } from "@grapecity/spread-excelio"; import { jsonData } from './data'; import './styles.css'; const Component = React.Component; function _getElementById(id) { return document.getElementById(id); } class App extends Component { constructor(props) { super(props); this.spread = null; this.importExcelFile = null; this.exportFileName = "export.xlsx"; this.password = ""; } render() { return <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet> </Worksheet> </SpreadSheets> </div> <div className="options-container"> <div className="option-row"> <div className="inputContainer"> <input type="file" id="fileDemo" className="input" onChange={e=>this.changeFileDemo(e)}/> <input type="button" id="loadExcel" defaultValue="import" className="button" onClick={e=>this.loadExcel(e)}/> </div> <div className="inputContainer"> <input id="exportFileName" defaultValue="export.xlsx" className="input" onChange={e=>this.changeExportFileName(e)}/> <input type="button" id="saveExcel" defaultValue="export" className="button" onClick={e=>this.saveExcel(e)}/> </div> </div> <div className="option-row"> <div className="group"> <label>Password: <input type="password" id="password" onChange={e=>this.changePassword(e)}/> </label> </div> </div> </div> </div>; } initSpread(spread) { this.spread = spread; spread.options.calcOnDemand = true; spread.fromJSON(jsonData); } changeFileDemo(e) { this.importExcelFile = e.target.files[0]; } changePassword(e) { this.password = e.target.value; } changeExportFileName(e) { this.exportFileName = e.target.value; } loadExcel(e) { let spread = this.spread; let excelIo = new IO(); let excelFile = this.importExcelFile; let password = this.password; // here is excel IO API excelIo.open(excelFile, function (json) { let workbookObj = json; spread.fromJSON(workbookObj); }, function (e) { // process error alert(e.errorMessage); }, { password: password }); } saveExcel(e) { let spread = this.spread; let excelIo = new IO(); let fileName = this.exportFileName; let password = this.password; if (fileName.substr(-5, 5) !== '.xlsx') { fileName += '.xlsx'; } let json = spread.toJSON(); // here is excel IO API excelIo.save(json, function (blob) { saveAs(blob, fileName); }, function (e) { // process error console.log(e); }, { password: password }); } } ReactDOM.render(<App />, _getElementById('app'));
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .sample-options { z-index: 1000; } .inputContainer { width: 100%; height: auto; border: 1px solid #eee; padding: 6px 12px; margin-bottom: 10px; box-sizing: border-box; } .input { font-size: 14px; height: 20px; border: 0; outline: none; background: transparent; } .button { height: 30px; padding: 6px 12px; width: 80px; margin-top: 6px; } .group { padding: 12px; } .group input { padding: 4px 12px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
export let jsonData = {"version":"11.0.0","tabStripRatio":0.784,"sheets":{"summary":{"name":"summary","defaults":{"colHeaderRowHeight":20,"rowHeaderColWidth":40,"rowHeight":40,"colWidth":64},"rowCount":10,"columnCount":15,"activeRow":7,"activeCol":4,"theme":{"name":"Office","themeColor":{"name":"Expense Trends Budget","background1":{"a":255,"r":255,"g":255,"b":255},"background2":{"a":255,"r":255,"g":255,"b":255},"text1":{"a":255,"r":0,"g":0,"b":0},"text2":{"a":255,"r":0,"g":0,"b":0},"accent1":{"a":255,"r":151,"g":185,"b":199},"accent2":{"a":255,"r":255,"g":204,"b":79},"accent3":{"a":255,"r":154,"g":178,"b":148},"accent4":{"a":255,"r":241,"g":89,"b":38},"accent5":{"a":255,"r":144,"g":96,"b":131},"accent6":{"a":255,"r":232,"g":156,"b":43},"hyperlink":{"a":255,"r":255,"g":255,"b":255},"followedHyperlink":{"a":255,"r":255,"g":255,"b":255}},"headingFont":"Century Gothic","bodyFont":"Calibri"},"data":{"dataTable":{"0":{"0":{"value":"EXPENSE TRENDS","style":"__builtInStyle14"},"1":{"style":"__builtInStyle14"},"2":{"style":"__builtInStyle14"}},"1":{"1":{"value":"Jan","style":"__builtInStyle20"},"2":{"value":"Feb","style":"__builtInStyle21"},"3":{"value":"Mar","style":"__builtInStyle21"},"4":{"value":"Apr","style":"__builtInStyle21"},"5":{"value":"May","style":"__builtInStyle21"},"6":{"value":"Jun","style":"__builtInStyle21"},"7":{"value":"Jul","style":"__builtInStyle21"},"8":{"value":"Aug","style":"__builtInStyle21"},"9":{"value":"Sep","style":"__builtInStyle21"},"10":{"value":"Oct","style":"__builtInStyle21"},"11":{"value":"Nov","style":"__builtInStyle21"},"12":{"value":"Dec","style":"__builtInStyle21"},"13":{"value":"Tips","style":"__builtInStyle22"}},"3":{"0":{"value":"Expenses","style":"__builtInTableStyle0__builtInStyle17"},"1":{"value":"Jan","style":"__builtInTableStyle0__builtInStyle17"},"2":{"value":"Feb","style":"__builtInTableStyle0__builtInStyle17"},"3":{"value":"Mar","style":"__builtInTableStyle0__builtInStyle17"},"4":{"value":"Apr","style":"__builtInTableStyle0__builtInStyle17"},"5":{"value":"May","style":"__builtInTableStyle0__builtInStyle17"},"6":{"value":"Jun","style":"__builtInTableStyle0__builtInStyle17"},"7":{"value":"Jul","style":"__builtInTableStyle0__builtInStyle17"},"8":{"value":"Aug","style":"__builtInTableStyle0__builtInStyle17"},"9":{"value":"Sep","style":"__builtInTableStyle0__builtInStyle17"},"10":{"value":"Oct","style":"__builtInTableStyle0__builtInStyle17"},"11":{"value":"Nov","style":"__builtInTableStyle0__builtInStyle17"},"12":{"value":"Dec","style":"__builtInTableStyle0__builtInStyle17"},"13":{"value":"Total","style":"__builtInTableStyle0__builtInStyle17"},"14":{"value":"Trend","style":"__builtInTableStyle0__builtInStyle17"}},"4":{"0":{"value":"Expense 1","style":"__builtInTableStyle1__builtInStyle15"},"1":{"value":33,"style":"__builtInTableStyle2__builtInStyle16"},"2":{"value":375,"style":"__builtInTableStyle2__builtInStyle16"},"3":{"value":33,"style":"__builtInTableStyle2__builtInStyle16"},"4":{"value":45,"style":"__builtInTableStyle2__builtInStyle16"},"5":{"value":375,"style":"__builtInTableStyle2__builtInStyle16"},"6":{"value":201,"style":"__builtInTableStyle2__builtInStyle16"},"7":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"8":{"value":23,"style":"__builtInTableStyle2__builtInStyle16"},"9":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"10":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"11":{"value":223,"style":"__builtInTableStyle2__builtInStyle16"},"12":{"value":201,"style":"__builtInTableStyle2__builtInStyle16"},"13":{"value":1878,"style":"__builtInTableStyle2__builtInStyle16","formula":"SUM(ExpenseSummary[[#This Row], [Jan]:[Dec]])"}},"5":{"0":{"value":"Expense 2","style":"__builtInTableStyle1__builtInStyle15"},"1":{"value":238,"style":"__builtInTableStyle2__builtInStyle16"},"2":{"value":238,"style":"__builtInTableStyle2__builtInStyle16"},"3":{"value":238,"style":"__builtInTableStyle2__builtInStyle16"},"4":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"5":{"value":111,"style":"__builtInTableStyle2__builtInStyle16"},"6":{"value":98,"style":"__builtInTableStyle2__builtInStyle16"},"7":{"value":30,"style":"__builtInTableStyle2__builtInStyle16"},"8":{"value":234,"style":"__builtInTableStyle2__builtInStyle16"},"9":{"value":34,"style":"__builtInTableStyle2__builtInStyle16"},"10":{"value":232,"style":"__builtInTableStyle2__builtInStyle16"},"11":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"12":{"value":440,"style":"__builtInTableStyle2__builtInStyle16"},"13":{"value":2139,"style":"__builtInTableStyle2__builtInStyle16","formula":"SUM(ExpenseSummary[[#This Row], [Jan]:[Dec]])"}},"6":{"0":{"value":"Expense 3","style":"__builtInTableStyle1__builtInStyle15"},"1":{"value":110,"style":"__builtInTableStyle2__builtInStyle16"},"2":{"value":110,"style":"__builtInTableStyle2__builtInStyle16"},"3":{"value":110,"style":"__builtInTableStyle2__builtInStyle16"},"4":{"value":125,"style":"__builtInTableStyle2__builtInStyle16"},"5":{"value":333,"style":"__builtInTableStyle2__builtInStyle16"},"6":{"value":122,"style":"__builtInTableStyle2__builtInStyle16"},"7":{"value":123,"style":"__builtInTableStyle2__builtInStyle16"},"8":{"value":23,"style":"__builtInTableStyle2__builtInStyle16"},"9":{"value":323,"style":"__builtInTableStyle2__builtInStyle16"},"10":{"value":322,"style":"__builtInTableStyle2__builtInStyle16"},"11":{"value":32,"style":"__builtInTableStyle2__builtInStyle16"},"12":{"value":122,"style":"__builtInTableStyle2__builtInStyle16"},"13":{"value":1855,"style":"__builtInTableStyle2__builtInStyle16","formula":"SUM(ExpenseSummary[[#This Row], [Jan]:[Dec]])"}},"7":{"0":{"value":"Expense 4","style":"__builtInTableStyle1__builtInStyle15"},"1":{"value":426,"style":"__builtInTableStyle2__builtInStyle16"},"2":{"value":84,"style":"__builtInTableStyle2__builtInStyle16"},"3":{"value":84,"style":"__builtInTableStyle2__builtInStyle16"},"4":{"value":426,"style":"__builtInTableStyle2__builtInStyle16"},"5":{"value":125,"style":"__builtInTableStyle2__builtInStyle16"},"6":{"value":187,"style":"__builtInTableStyle2__builtInStyle16"},"7":{"value":255,"style":"__builtInTableStyle2__builtInStyle16"},"8":{"value":435,"style":"__builtInTableStyle2__builtInStyle16"},"9":{"value":43,"style":"__builtInTableStyle2__builtInStyle16"},"10":{"value":33,"style":"__builtInTableStyle2__builtInStyle16"},"11":{"value":324,"style":"__builtInTableStyle2__builtInStyle16"},"12":{"value":187,"style":"__builtInTableStyle2__builtInStyle16"},"13":{"value":2609,"style":"__builtInTableStyle2__builtInStyle16","formula":"SUM(ExpenseSummary[[#This Row], [Jan]:[Dec]])"}},"8":{"0":{"value":"Expense 5","style":"__builtInTableStyle1__builtInStyle15"},"1":{"value":54,"style":"__builtInTableStyle2__builtInStyle16"},"2":{"value":54,"style":"__builtInTableStyle2__builtInStyle16"},"3":{"value":109,"style":"__builtInTableStyle2__builtInStyle16"},"4":{"value":98,"style":"__builtInTableStyle2__builtInStyle16"},"5":{"value":33,"style":"__builtInTableStyle2__builtInStyle16"},"6":{"value":441,"style":"__builtInTableStyle2__builtInStyle16"},"7":{"value":23,"style":"__builtInTableStyle2__builtInStyle16"},"8":{"value":234,"style":"__builtInTableStyle2__builtInStyle16"},"9":{"value":321,"style":"__builtInTableStyle2__builtInStyle16"},"10":{"value":21,"style":"__builtInTableStyle2__builtInStyle16"},"11":{"value":22,"style":"__builtInTableStyle2__builtInStyle16"},"12":{"value":99,"style":"__builtInTableStyle2__builtInStyle16"},"13":{"value":1509,"style":"__builtInTableStyle2__builtInStyle16","formula":"SUM(ExpenseSummary[[#This Row], [Jan]:[Dec]])"}},"9":{"0":{"value":"Total","style":"__builtInTableStyle3__builtInStyle18"},"1":{"value":861,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Jan])"},"2":{"value":861,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Feb])"},"3":{"value":574,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Mar])"},"4":{"value":817,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Apr])"},"5":{"value":977,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[May])"},"6":{"value":1049,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Jun])"},"7":{"value":554,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Jul])"},"8":{"value":949,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Aug])"},"9":{"value":844,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Sep])"},"10":{"value":731,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Oct])"},"11":{"value":724,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Nov])"},"12":{"value":1049,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Dec])"},"13":{"value":9990,"style":"__builtInTableStyle4__builtInStyle19","formula":"SUBTOTAL(109,ExpenseSummary[Total])"}}},"columnDataArray":[{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"},{"style":"__builtInStyle13"}],"defaultDataNode":{"style":{"backColor":null,"foreColor":"Text 1 0","vAlign":2,"font":"14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false}}},"rowHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"colHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"selections":{"0":{"row":7,"rowCount":1,"col":4,"colCount":1},"length":1},"rows":[{"size":47},{"size":23},{"size":299},{"size":23},{"size":40,"visible":true},{"size":40,"visible":true},{"size":40,"visible":true},{"size":40,"visible":true},{"size":40,"visible":true},{"size":40}],"columns":[{"size":118},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":88},{"size":89}],"sparklineGroups":[{"setting":{"axisColor":"#000000","firstMarkerColor":"Accent 2 -24","highMarkerColor":"Accent 2 -24","lastMarkerColor":"Accent 4 -49","lowMarkerColor":"Accent 2 -24","markersColor":"Accent 4 -24","negativeColor":"Accent 3 -49","seriesColor":"Accent 1 -49","showLast":true,"showNegative":true,"showMarkers":true,"groupMaxValue":-1.7976931348623157e+308,"groupMinValue":1.7976931348623157e+308},"sparklineType":0,"sparklines":[{"row":4,"col":14,"orientation":1,"data":{"row":4,"rowCount":1,"col":1,"colCount":12}},{"row":5,"col":14,"orientation":1,"data":{"row":5,"rowCount":1,"col":1,"colCount":12}},{"row":6,"col":14,"orientation":1,"data":{"row":6,"rowCount":1,"col":1,"colCount":12}},{"row":7,"col":14,"orientation":1,"data":{"row":7,"rowCount":1,"col":1,"colCount":12}},{"row":8,"col":14,"orientation":1,"data":{"row":8,"rowCount":1,"col":1,"colCount":12}}]},{"setting":{"axisColor":"#000000","firstMarkerColor":"Accent 1 39","highMarkerColor":"Accent 1 0","lastMarkerColor":"Accent 1 39","lowMarkerColor":"Accent 1 0","markersColor":"Accent 4 0","negativeColor":"Accent 2 0","seriesColor":"Background 1 -49","showMarkers":true,"groupMaxValue":-1.7976931348623157e+308,"groupMinValue":1.7976931348623157e+308},"sparklineType":0,"sparklines":[{"row":9,"col":14,"orientation":1,"data":{"row":9,"rowCount":1,"col":1,"colCount":12}}]}],"charts":[{"name":"ExpenseTrends","y":77.4,"width":1346.8,"height":284.83000000000004,"dynamicSize":false,"typeName":"2","chartSpace":{"roundedCorners":false,"chart":{"autoTitleDeleted":true,"plotArea":{"chartGroups":[{"chartType":6,"ser":[{"seriesType":0,"idx":0,"order":0,"tx":{"strRef":{"f":"summary!$A$5"}},"spPr":{"ln":{"noFill":true},"solidFill":{"schemeClr":{"val":1,"lumMod":[65000],"lumOff":[35000]}}},"invertIfNegative":false,"cat":{"strRef":{"f":"summary!$B$4:$M$4"}},"val":{"numRef":{"f":"summary!$B$5:$M$5","numCache":{"formatCode":"#,##0.00"}}},"shape":2},{"seriesType":0,"idx":1,"order":1,"tx":{"strRef":{"f":"summary!$A$6"}},"spPr":{"ln":{"noFill":true},"solidFill":{"schemeClr":{"val":4,"lumMod":[75000]}}},"invertIfNegative":false,"cat":{"strRef":{"f":"summary!$B$4:$M$4"}},"val":{"numRef":{"f":"summary!$B$6:$M$6","numCache":{"formatCode":"#,##0.00"}}},"shape":2},{"seriesType":0,"idx":2,"order":2,"tx":{"strRef":{"f":"summary!$A$7"}},"spPr":{"ln":{"noFill":true},"solidFill":{"schemeClr":{"val":5,"lumMod":[75000]}}},"invertIfNegative":false,"cat":{"strRef":{"f":"summary!$B$4:$M$4"}},"val":{"numRef":{"f":"summary!$B$7:$M$7","numCache":{"formatCode":"#,##0.00"}}},"shape":2},{"seriesType":0,"idx":3,"order":3,"tx":{"strRef":{"f":"summary!$A$8"}},"spPr":{"ln":{"noFill":true},"solidFill":{"schemeClr":{"val":6,"lumMod":[75000]}}},"invertIfNegative":false,"cat":{"strRef":{"f":"summary!$B$4:$M$4"}},"val":{"numRef":{"f":"summary!$B$8:$M$8","numCache":{"formatCode":"#,##0.00"}}},"shape":2},{"seriesType":0,"idx":4,"order":4,"tx":{"strRef":{"f":"summary!$A$9"}},"spPr":{"ln":{"noFill":true},"solidFill":{"schemeClr":{"val":7,"lumMod":[75000]}}},"invertIfNegative":false,"cat":{"strRef":{"f":"summary!$B$4:$M$4"}},"val":{"numRef":{"f":"summary!$B$9:$M$9","numCache":{"formatCode":"#,##0.00"}}},"shape":2}],"axId":[44409648,82558214],"barDir":1,"grouping":1,"gapWidth":150,"varyColors":false,"overlap":0}],"axes":[{"axisType":0,"axId":44409648,"scaling":{"orientation":1},"delete":false,"axPos":0,"minorGridlines":{"spPr":{"ln":{"solidFill":{"schemeClr":{"val":0,"lumMod":[50000]}}}}},"numFmt":{"formatCode":"General","sourceLinked":false},"majorTickMark":2,"minorTickMark":2,"tickLblPos":2,"txPr":{"p":[{"pPr":{"defRPr":{"solidFill":{"schemeClr":{"val":0}}}},"endParaRPr":{},"elements":[]}]},"crossAx":82558214,"crosses":1,"auto":true,"lblAlgn":0,"lblOffset":100,"noMultiLvlLbl":true,"spPr":{"ln":{"w":1,"cap":2,"cmpd":0,"algn":0,"round":true,"solidFill":{"schemeClr":{"val":1,"lumMod":[15000],"lumOff":[85000]}}},"noFill":true},"tickMarkSkip":1,"AxisGroup":0,"AxisType":0},{"axisType":3,"axId":82558214,"scaling":{"orientation":1},"delete":false,"axPos":1,"title":{"tx":{"rich":{"p":[{"pPr":{"defRPr":{"sz":53.33,"solidFill":{"schemeClr":{"val":0}}}},"elements":[{"elementType":0,"rPr":{"sz":42.67,"solidFill":{"schemeClr":{"val":0}}},"t":"aaaaaaa"}],"endParaRPr":{}}]}},"overlay":false},"numFmt":{"formatCode":"#,##0;;","sourceLinked":false},"majorTickMark":2,"minorTickMark":2,"tickLblPos":2,"spPr":{"ln":{"solidFill":{"schemeClr":{"val":0,"lumMod":[85000]}}}},"txPr":{"p":[{"pPr":{"defRPr":{"sz":14.67,"solidFill":{"schemeClr":{"val":1,"lumMod":[65000],"lumOff":[35000]}}}},"endParaRPr":{},"elements":[]}]},"crossAx":44409648,"crosses":1,"crossBetween":0,"AxisGroup":0,"AxisType":1}],"layout":{"manualLayout":{"xMode":0,"yMode":0,"x":0.09010847536463006,"y":0.031433788567494125,"w":0.7830555162943948,"h":0.9308183494897717}},"spPr":{"noFill":true,"ln":{"noFill":true}}},"legend":{"legendPos":2,"overlay":false,"txPr":{"p":[{"pPr":{"defRPr":{"sz":14.67,"kern":0,"spc":-10,"latin":{"pitchFamily":0,"charset":1,"typeface":"+mj-lt"},"solidFill":{"schemeClr":{"val":1}}}},"endParaRPr":{},"elements":[]}]}},"plotVisOnly":true,"dispBlanksAs":1,"showDLblsOverMax":false},"spPr":{"ln":{"noFill":true},"noFill":true},"printSettings":{"headerFooter":{"alignWithMargins":true},"pageMargins":{"b":0.75,"l":0.7,"r":0.7,"t":0.75,"header":0.3,"footer":0.3},"pageSetup":{"paperSize":1,"firstPageNumber":1,"orientation":0,"blackAndWhite":false,"draft":false,"useFirstPageNumber":false,"horizontalDpi":600,"verticalDpi":600,"copies":1}},"txPr":{"p":[{"elements":[],"pPr":{"defRPr":{}},"endParaRPr":{}}]}}}],"printInfo":{"repeatRowStart":3,"repeatRowEnd":3,"showColumnHeader":1,"showRowHeader":1,"centering":1,"footerCenter":"Page &P of &N","margin":{"top":75,"bottom":75,"left":25,"right":25,"header":30,"footer":30},"orientation":2,"pageOrder":1,"fitPagesTall":1,"fitPagesWide":1,"paperSize":{"width":850,"height":1100,"kind":null}},"tables":[{"name":"ExpenseSummary","row":3,"col":0,"rowCount":7,"colCount":15,"showFooter":true,"highlightLastColumn":true,"bandRows":false,"bandColumns":true,"style":{"name":"Summary Table","headerRowStyle":{"backColor":null,"foreColor":"Text 1 0","font":"normal bold 14.7px Calibri","borderLeft":{},"borderTop":{"color":"Text 1 49","style":1},"borderRight":{},"borderBottom":{"color":"Background 1 -14","style":1},"borderHorizontal":{},"borderVertical":{}},"footerRowStyle":{"backColor":null,"foreColor":"Text 1 0","font":"normal bold 14.7px Calibri","borderLeft":{},"borderTop":{"color":"Background 1 -14","style":1},"borderRight":{},"borderBottom":{"color":"Text 1 49","style":1},"borderHorizontal":{},"borderVertical":{"color":"Background 1 -14","style":1}},"wholeTableStyle":{"backColor":null,"foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","borderLeft":{},"borderTop":{},"borderRight":{},"borderBottom":{},"borderHorizontal":{"color":"Background 1 -14","style":1},"borderVertical":{"color":"Background 1 -14","style":1}},"highlightLastColumnStyle":{"backColor":null},"highlightFirstColumnStyle":{"backColor":"Background 1 -4"},"firstColumnStripStyle":{"backColor":"Background 1 -4"}},"rowFilter":{"range":{"row":4,"rowCount":5,"col":0,"colCount":15},"typeName":"HideRowFilter","filterButtonVisibleInfo":{"0":true,"1":true,"2":true,"3":true,"4":true,"5":true,"6":true,"7":true,"8":true,"9":true,"10":true,"11":true,"12":true,"13":true,"14":true},"showFilterButton":true},"columns":[{"id":1,"name":"Expenses","footerValue":"Total"},{"id":2,"name":"Jan","footerFormula":"SUBTOTAL(109,ExpenseSummary[Jan])"},{"id":3,"name":"Feb","footerFormula":"SUBTOTAL(109,ExpenseSummary[Feb])"},{"id":4,"name":"Mar","footerFormula":"SUBTOTAL(109,ExpenseSummary[Mar])"},{"id":5,"name":"Apr","footerFormula":"SUBTOTAL(109,ExpenseSummary[Apr])"},{"id":6,"name":"May","footerFormula":"SUBTOTAL(109,ExpenseSummary[May])"},{"id":7,"name":"Jun","footerFormula":"SUBTOTAL(109,ExpenseSummary[Jun])"},{"id":8,"name":"Jul","footerFormula":"SUBTOTAL(109,ExpenseSummary[Jul])"},{"id":9,"name":"Aug","footerFormula":"SUBTOTAL(109,ExpenseSummary[Aug])"},{"id":10,"name":"Sep","footerFormula":"SUBTOTAL(109,ExpenseSummary[Sep])"},{"id":11,"name":"Oct","footerFormula":"SUBTOTAL(109,ExpenseSummary[Oct])"},{"id":12,"name":"Nov","footerFormula":"SUBTOTAL(109,ExpenseSummary[Nov])"},{"id":13,"name":"Dec","footerFormula":"SUBTOTAL(109,ExpenseSummary[Dec])"},{"id":14,"name":"Total","footerFormula":"SUBTOTAL(109,ExpenseSummary[Total])"},{"id":15,"name":"Trend"}]}],"sheetTabColor":"Accent 1 -49","gridline":{"showHorizontalGridline":false,"showVerticalGridline":false},"index":0}},"namedStyles":[{"backColor":"Accent 1 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent1"},{"backColor":"Accent 2 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent2"},{"backColor":"Accent 3 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent3"},{"backColor":"Accent 4 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent4"},{"backColor":"Accent 5 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent5"},{"backColor":"Accent 6 79","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"20% - Accent6"},{"backColor":"Accent 1 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent1"},{"backColor":"Accent 2 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent2"},{"backColor":"Accent 3 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent3"},{"backColor":"Accent 4 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent4"},{"backColor":"Accent 5 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent5"},{"backColor":"Accent 6 59","foreColor":"Text 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"40% - Accent6"},{"backColor":"Accent 1 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent1"},{"backColor":"Accent 2 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent2"},{"backColor":"Accent 3 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent3"},{"backColor":"Accent 4 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent4"},{"backColor":"Accent 5 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent5"},{"backColor":"Accent 6 39","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"60% - Accent6"},{"backColor":"Accent 1 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent1"},{"backColor":"Accent 2 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent2"},{"backColor":"Accent 3 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent3"},{"backColor":"Accent 4 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent4"},{"backColor":"Accent 5 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent5"},{"backColor":"Accent 6 0","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Accent6"},{"backColor":"#ffc7ce","foreColor":"#9c0006","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Bad"},{"backColor":"#f2f2f2","foreColor":"#fa7d00","font":"normal bold 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"#7f7f7f","style":1},"borderTop":{"color":"#7f7f7f","style":1},"borderRight":{"color":"#7f7f7f","style":1},"borderBottom":{"color":"#7f7f7f","style":1},"name":"Calculation"},{"backColor":"#a5a5a5","foreColor":"Background 1 0","font":"normal bold 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"#3f3f3f","style":6},"borderTop":{"color":"#3f3f3f","style":6},"borderRight":{"color":"#3f3f3f","style":6},"borderBottom":{"color":"#3f3f3f","style":6},"name":"Check Cell"},{"backColor":null,"name":"Comma"},{"backColor":null,"name":"Comma [0]"},{"backColor":null,"name":"Currency"},{"backColor":null,"name":"Currency [0]"},{"backColor":null,"foreColor":"#7f7f7f","font":"italic normal 14.7px Calibri","themeFont":"Body","name":"Explanatory Text"},{"backColor":"#c6efce","foreColor":"#006100","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Good"},{"backColor":"#ffcc99","foreColor":"#3f3f76","font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"#7f7f7f","style":1},"borderTop":{"color":"#7f7f7f","style":1},"borderRight":{"color":"#7f7f7f","style":1},"borderBottom":{"color":"#7f7f7f","style":1},"name":"Input"},{"backColor":null,"foreColor":"#fa7d00","font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":{"color":"#ff8001","style":6},"name":"Linked Cell"},{"backColor":"#ffeb9c","foreColor":"#9c6500","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Neutral"},{"backColor":"#ffffcc","borderLeft":{"color":"#b2b2b2","style":1},"borderTop":{"color":"#b2b2b2","style":1},"borderRight":{"color":"#b2b2b2","style":1},"borderBottom":{"color":"#b2b2b2","style":1},"name":"Note"},{"backColor":"#f2f2f2","foreColor":"#3f3f3f","font":"normal bold 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"#3f3f3f","style":1},"borderTop":{"color":"#3f3f3f","style":1},"borderRight":{"color":"#3f3f3f","style":1},"borderBottom":{"color":"#3f3f3f","style":1},"name":"Output"},{"backColor":null,"name":"Percent"},{"backColor":null,"foreColor":"Text 1 0","font":"normal bold 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":{"color":"Accent 1 0","style":1},"borderRight":null,"borderBottom":{"color":"Accent 1 0","style":6},"name":"Total"},{"backColor":null,"foreColor":"#ff0000","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Warning Text"},{"backColor":"Text 1 34","foreColor":null,"font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Followed Hyperlink"},{"backColor":"Text 1 34","foreColor":"Background 1 0","hAlign":1,"vAlign":1,"font":"normal normal 14.7px Century Gothic","themeFont":"Headings","borderLeft":{"color":"Background 1 0","style":2},"borderTop":null,"borderRight":{"color":"Background 1 0","style":2},"borderBottom":null,"textIndent":0,"wordWrap":false,"name":"Heading 1"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"textIndent":1,"wordWrap":false,"name":"Heading 2"},{"backColor":null,"foreColor":"Text 1 0","hAlign":2,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"textIndent":1,"wordWrap":false,"name":"Heading 3"},{"backColor":"Background 1 -4","foreColor":"Text 2 0","hAlign":3,"vAlign":1,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","textIndent":0,"wordWrap":true,"name":"Heading 4"},{"backColor":"Text 1 34","foreColor":"Background 1 0","font":"normal normal 14.7px Calibri","themeFont":"Body","name":"Hyperlink"},{"backColor":null,"foreColor":"Text 1 0","hAlign":3,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"Normal"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"Table date"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":true,"name":"Table details"},{"backColor":null,"foreColor":"Text 1 0","hAlign":2,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"Table numbers"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":1,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":3,"wordWrap":true,"name":"Tip text"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":1,"font":"normal normal 13.3px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":6,"wordWrap":true,"name":"Tip text indented"},{"backColor":null,"foreColor":"Text 1 34","font":"normal normal 30px Century Gothic","themeFont":"Headings","name":"Title"},{"backColor":null,"foreColor":"Text 1 0","hAlign":3,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"__builtInStyle13"},{"backColor":null,"foreColor":"Text 1 34","hAlign":3,"vAlign":2,"font":"normal normal 30px Century Gothic","themeFont":"Headings","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"__builtInStyle14"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":true,"name":"__builtInStyle15","parentName":"Table details"},{"backColor":null,"foreColor":"Text 1 0","hAlign":2,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","formatter":"#,##0.00","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInStyle16","parentName":"Table numbers"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInStyle17"},{"backColor":null,"foreColor":"Text 1 0","hAlign":0,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInStyle18"},{"backColor":null,"foreColor":"Text 1 0","hAlign":2,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","formatter":"#,##0.00","borderLeft":null,"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInStyle19"},{"backColor":"Text 1 34","foreColor":"Background 1 0","hAlign":1,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":null,"borderTop":null,"borderRight":{"color":"Background 1 0","style":5},"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"__builtInStyle20","parentName":"Hyperlink"},{"backColor":"Text 1 34","foreColor":"Background 1 0","hAlign":1,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"Background 1 0","style":5},"borderTop":null,"borderRight":{"color":"Background 1 0","style":5},"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"__builtInStyle21","parentName":"Hyperlink"},{"backColor":"Text 1 34","foreColor":"Background 1 0","hAlign":1,"vAlign":2,"font":"normal normal 14.7px Calibri","themeFont":"Body","borderLeft":{"color":"Background 1 0","style":5},"borderTop":null,"borderRight":null,"borderBottom":null,"locked":true,"textIndent":0,"wordWrap":false,"name":"__builtInStyle22","parentName":"Hyperlink"},{"hAlign":0,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInTableStyle0__builtInStyle17"},{"hAlign":0,"vAlign":2,"themeFont":"Body","locked":true,"textIndent":1,"wordWrap":true,"name":"__builtInTableStyle1__builtInStyle15","parentName":"Table details"},{"hAlign":2,"vAlign":2,"themeFont":"Body","formatter":"#,##0.00","locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInTableStyle2__builtInStyle16","parentName":"Table numbers"},{"hAlign":0,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInTableStyle3__builtInStyle18"},{"hAlign":2,"vAlign":2,"font":"normal bold 14.7px Century Gothic","themeFont":"Headings","formatter":"#,##0.00","locked":true,"textIndent":1,"wordWrap":false,"name":"__builtInTableStyle4__builtInStyle19"}],"names":[{"name":"ColumnTitle10","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle11","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle12","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle13","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle14","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle2","formula":"ExpenseSummary[[#Headers], [Expenses]]","row":0,"col":0},{"name":"ColumnTitle3","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle4","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle5","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle6","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle7","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle8","formula":"#REF!","row":0,"col":0},{"name":"ColumnTitle9","formula":"#REF!","row":0,"col":0},{"name":"ExpenseCategories","formula":"ExpenseSummary[Expenses]","row":0,"col":0}]};
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets-charts': 'npm:@grapecity/spread-sheets-charts/index.js', '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-react': 'npm:@grapecity/spread-sheets-react/index.js', '@grapecity/spread-excelio': 'npm:@grapecity/spread-excelio/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);