Excel IO元素

通过将SpreadJS与React一起使用Excel IO元素，您可以在网页上快速呈现和显示excel表格，同时还可以轻松执行导入和导出操作。

• 创建一个React项目 打开命令提示符窗口，然后键入以下命令： 完成后，将在目录中的指定位置创建react项目。 有关如何创建一个React项目的更多信息，请参阅https://reactjs.org/docs/create-a-new-react-app.html
• 在项目中安装SpreadJS React模块 接下来，您需要使用以下命令在项目中安装 @grapecity-software/spread-sheets-react：
• 将SpreadJS CSS导入index.js文件 接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：
• 在项目中安装Excel IO React Module和FileSaver React Module 接下来，您需要使用以下命令在项目中安装Excel I / O和文件保护程序模块：
• 在React Application中使用Excel IO 现在，您可以根据需要修改App.js文件。 刷新浏览器窗口时，变更将反映出来。 例如，您可以使用下面给出的示例代码： 本示例说明如何在React应用程序中使用Excel IO元素。

import React from 'react';
                            import './App.css';
                            import GC from '@grapecity-software/spread-sheets';
                            import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';

                            // 导入ExcelIO模块
                            import spreadExcel from '@grapecity-software/spread-excelio';

                            // 导入文件保存模块
                            import saveAs from 'file-saver';

                            var SpreadJSKey = "xxx";
                            GC.Spread.Sheets.LicenseKey = SpreadJSKey;

                             

                            // 您需要使用相同的许可证密钥单独许可ExcelIO模块
                            spreadExcel.LicenseKey = SpreadJSKey;

                            class App extends React.Component {
                                constructor(props) {
                                    super(props);
                                    this.hostStyle =
                                        {
                                            width: '1100px',
                                            height: '800px'
                                        };
                                }

                            
                            // 处理工作簿初始化事件
                                workbookInit = (spread) => {
                                    this.setState({
                                        spread: spread
                                    });
                                }

                            // 导入 Excel
                                importFile = () => {
                                    var excelFile = document.getElementById("fileDemo").files[0];

                                    // 获取IO类的实例
                                    let excelIO = new spreadExcel.IO();
                                    excelIO.open(excelFile, (json) => {
                                        this.state.spread.fromJSON(json);
                                    }, (e) => {
                                        console.log(e);
                                    });
                                }

                            // 导出 Excel

                                exportFile = () => {

                                    // 获取IO类的实例
                                    let excelIO = new spreadExcel.IO();
                                    let fileName = document.getElementById("exportFileName").value;
                                    if (fileName.substr(-5, 5) !== '.xlsx') {
                                        fileName += '.xlsx';
                                    }
                                    var json = JSON.stringify(this.state.spread.toJSON());
                                    excelIO.save(json, (blob) => {
                                        saveAs(blob, fileName);
                                    }, (e) => {
                                        console.log(e);
                                    });

                                }
                                render() {
                                    return (
                                        <div>
                                            <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
                                            <input type="button" id="loadExcel" value="Import" onClick={this.importFile} />
                                            <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} />
                                            <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
                                            <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
                                                <Worksheet>
                                                </Worksheet>
                                            </SpreadSheets>
                                        </div>
                                    )
                                }
                            }
                            export default App;