在 Create React App 中使用

SpreadJS 支持在 Create React App 开发环境中一起使用单独的模块和插件。

使用模块与插件

包含以下步骤：

1. 创建一个创建React应用程序项目

   打开命令提示符窗口并键入以下命令：

   npx create-react-app my-app
   cd my-app 
   npm start

   完成后，将在目录中的指定位置创建create React App项目。有关如何创建create React App项目的更多信息，请参阅创建React App。

2. 在项目中安装SpreadJS模块和插件

   使用以下命令安装 SpreadJS NPM 模块和插件：

   npm run eject
   npm install @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-print @grapecity-software/spread-sheets-react

3. 在 Create React App 应用程序中使用 SpreadJS

   使用以下代码修改 App.js 文件。

   刷新浏览器窗口时将反映更改。

   import "@grapecity-software/spread-common";
   import "@grapecity-software/spread-calc-engine";
   import "@grapecity-software/spread-sheets-core";
   import "@grapecity-software/spread-sheets-calc-engine";
   import "@grapecity-software/spread-sheets-print";
   import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';
   import './App.css';
   import '../node_modules/@grapecity-software/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   function App() {
       let initSpread = function (value) {
           let spread = window.spread = value;
           let sheet = spread.getActiveSheet();
           sheet.setValue(0, 0, "Hello SpreadJS");
       }
       let printSpread = function () {
           let spread = window.spread;
           spread.print();
       }
       return (<div className="sample-tutorial">
           <div className="sample-spreadsheets">
               <SpreadSheets workbookInitialized={spread => initSpread(spread)}>
                   <Worksheet></Worksheet>
               </SpreadSheets>
           </div>
           <div id="testButton" onClick={() => printSpread()}>Print</div>
       </div>);
   }
   export default App;

   使用以下代码修改App.css：

   .sample-tutorial {
       position: relative;
       height: 400px;
       overflow: hidden;
   } 
   .sample-spreadsheets {
       width: 100%;
       height: 300px;
   }
   body {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   } 
   #testButton {
       margin-top: 10px;
       text-align: center;
       width: 100px;
       height: 30px; 
       border: 1px solid gray; 
       background-color: lightblue;
   }

   在 web.config.js 中，搜索 alias，并添加一个别名，如下所示：

   .....
   alias:{
      "@grapecity-software/spread-sheets": require.resolve("@grapecity-software/spread-common"),
      .......
   }
   .....