您好,很抱歉我们的文档还不完善,导致这个问题延误了很久,目前已经找到解决办法:
- class SpreadSheetsCon extends Component {
- constructor(props) {
- super(props);
- this.state = {
- newTabVisible:true,
- tabStripVisible:true,
- showHorizontalScrollbar: true,
- showVerticalScrollbar:true,
- allowUserZoom : true,
- allowUserResize : true,
- spreadBackColor: '#FFFFFF',
- grayAreaBackColor: '#E4E4E4',
- };
- this.hostStyle = {
- top: '90px',
- bottom: '130px'
- };
- this.autoGenerateColumns = false;
- this.data = dataService.getPersonAddressData();
- this.workbookInitialized = function(workbook){
- window.spread = workbook;
- }
- //this.findControl = GC.Spread.Sheets.findControl;
- }
复制代码
您注意workbookInitialized 这个接口,是SpreadJS提供的一个加载完毕事件,
可以用来获取页面上SpreadJS 实例。
- importExcel(){
- var excelFile = document.getElementById("fileDemo").files[0];
- var password = "";
- // here is excel IO API
-  new Excel.IO().open(excelFile, function (json) {
-
- var workbookObj = json;
- var spread = window.spread;
- spread.fromJSON(workbookObj);
- }, function (e) {
- // process error
- alert(e.errorMessage);
- }, {password: password});
- }
复制代码
- <SpreadSheets workbookInitialized={this.workbookInitialized}
- newTabVisible={this.state.newTabVisible} tabStripVisible={this.state.tabStripVisible}
- showHorizontalScrollbar={this.state.showHorizontalScrollbar}
- showVerticalScrollbar={this.state.showVerticalScrollbar}
- backColor={this.state.spreadBackColor} grayAreaBackColor={this.state.grayAreaBackColor}
- allowUserZoom={this.state.allowUserZoom} allowUserResize={this.state.allowUserResize}>
- <Worksheet dataSource={this.data}
- autoGenerateColumns={this.autoGenerateColumns}>
- <Column width={150} dataField="Name"/>
- <Column width={150} dataField="CountryRegionCode"/>
- <Column width={100} dataField="City"/>
- <Column width={200} dataField="AddressLine"/>
- <Column width={100} dataField="PostalCode"/>
- </Worksheet>
- </SpreadSheets>
复制代码 |