SpreadJS 文档
SpreadJS 文档 / 开发者指南 / JavaScript 框架 / 在React中使用SpreadJS / Excel IO标签
在本主题中
    Excel IO标签
    在本主题中

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

    1. 创建一个React项目

      打开命令提示符窗口,然后键入以下命令:

      npm install -g create-react-app
      create-react-app quick-start
      cd quick-start
      npm start

      完成后,将在目录中的指定位置创建react项目。 有关如何创建一个React项目的更多信息,请参阅https://reactjs.org/docs/create-a-new-react-app.html

    2. 在项目中安装SpreadJS React模块

      接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react:

      npm install @grapecity/spread-sheets-react
             
    3. 将SpreadJS CSS导入index.js文件

      接下来,您需要使用以下代码将SpreadJS CSS导入index.js文件中:

      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
             
    4. 在项目中安装Excel IO React Module和FileSaver React Module

      接下来,您需要使用以下命令在项目中安装Excel I / O和文件保护程序模块:

      npm install @grapecity/spread-excelio
      npm install file-saver --save
             
    5. 在React Application中使用Excel IO

      现在,您可以根据需要修改App.js文件。 刷新浏览器窗口时,更改将反映出来。 例如,您可以使用下面给出的示例代码:

      本示例说明如何在React应用程序中使用Excel IO元素。

      JavaScript
      复制代码

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

      // 导入ExcelIO模块
      import spreadExcel from '@grapecity/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;