关于葡萄城开发技术:前端必读20如何在React-中使用SpreadJS导入和导出-Excel-文件

最近咱们公司接到一个客户的需要，要求为正在开发的我的项目加个性能。我的项目的前端应用的是 React，客户想增加具备 Excel 导入 / 导出性能的电子表格模块。
通过几个小时的原型构建后，技术团队确认所有客户需要文档中形容的性能都曾经实现了，并且原型能够在截止日期前做好演示筹备。然而，在跟产品组再次探讨客户需要时，咱们发现之前对无关电子表格的局部了解可能存在偏差。
客户的具体需要点仅仅提到反对双击填报、具备边框设置、背景色设置和删除行列等性能，但这部分需要形容不是很明确，而且最初提到“像 Excel 的相似体验”，咱们之前疏忽了这句话背地的信息量。通过与客户的业务需求方的间接沟通，能够确认终端用户就是想间接在网页端操作 Excel，并且间接把编辑实现的表格以 Excel 的格局下载到本地。

本文 demo 下载地址：
https://gcdn.grapecity.com.cn…

如何把前端表格增加到你的 React 利用中

你能够看到在 StackBlitz 上实时运行的动态表格应用程序，并且能够在此处找到演示源。
如果你想要曾经增加了 SpreadJS 的成熟应用程序，请下载此示例。
实现后，关上终端，导航到克隆存储库的目录，而后运行：

> npm install

当初你将看到更新后的应用程序正在运行。

Step 1: 原生 HTML 表格

该应用程序的前端基于 ReactJS 构建，并由应用 JSX 语法、JavaScript 和 HTML 代码组合创立的组件形成。该应用程序是应用性能组件的语法创立的。这种办法使咱们能够防止编写类，这会使组件更加简单和难以浏览。
仪表板位于 JSX 组件层次结构的顶部。它出现 HTML 内容并保护应用程序状态，源自具备虚构 JSON 销售数据的文件。
每个子组件负责出现其内容。因为只有 Dashboard 保留应用程序状态，因而它通过 props 将数据向下传递给每个子组件。

Import React, {useState} from‘react’;
import {NavBar} from‘./NavBar’import {TotalSales} from‘./TotalSales’import {SalesByCountry} from‘./SalesByCountry’import {SalesByPerson} from‘./SalesByPerson’import {SalesTable} from‘./SalesTable’import {groupBySum} from“../util/util”;
import {recentSales} from“../data/data”;
export const Dashboard = () => {
const sales = recentSales;
function totalSales() {
      const items = sales;
      const total = items.reduce((acc, sale) => (acc += sale.value),
        0
      );
      return parseInt(total);
};
function chartData() {
      const items = sales;
      const groups = groupBySum(items,“country”,“value”);
      return groups;
};
function personSales() {
      const items = sales;
      const groups = groupBySum(items,“soldBy”,“value”);
      return groups;
};
function salesTableData() {return sales;};
return (<div style={{ backgroundColor:‘#ddd’}}>
            <NavBar title=”Awesome Dashboard”/>
            <div className=”container”>
                <div className=”row”>
                    <TotalSales total={totalSales()}/>
                    <SalesByCountry salesData={chartData()}/>
                    <SalesByPerson salesData={personSales()}/>
                    <SalesTable tableData={salesTableData()}/>
                </div>
            </div>
        </div>
);
}

Step 2: 替换为 SpreadJS 表格
在编写任何代码行之前，咱们必须首先装置 GrapeCity 的 Spread.Sheets Wrapper Components for React。只需进行应用程序，而后运行以下两个命令：

> npm install @grapecity/spread-sheets-react
> npm start

在应用 SpreadJS 之前，你必须批改 SalesTable.js 文件以申明 GrapeCity 组件的导入。这些导入将容许拜访 SpreadSheets、Worksheet 和 SpreadJS 库的 Column 对象。

Import React from‘react’;
import {TablePanel} from“./TablePanel”;
// SpreadJS imports
import‘@grapecity/spread-sheets-react’;
/* eslint-disable */
import“@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css”;
import {SpreadSheets, Worksheet, Column} from‘@grapecity/spread-sheets-react’;

此外，如果没有一些根本设置，SpreadJS 工作表将无奈失常工作，因而让咱们创立一个配置对象来保留工作表参数。

Export const SalesTable = ({tableData} ) => {
const config = {
        sheetName:‘Sales Data’,
        hostClass:‘spreadsheet’,
        autoGenerateColumns: false,
        width: 200,
        visible: true,
        resizable: true,
        priceFormatter:‘$ #.00’,
        chartKey: 1
}

首先，咱们必须打消在 SalesTable 组件中出现动态面板的 JSX 代码：

return (
<TablePanel title=”Recent Sales”>
        <table className=”table”>
            <thead>
            <tr>
                <th>Client</th>
                <th>Description</th>
                <th>Value</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
            {tableData.map((sale) =>
            (<tr key={sale.id}>
                <td>{sale.client}</td>
                <td>{sale.description}</td>
                <td>${sale.value}</td>
                <td>{sale.itemCount}</td>
            </tr>))}
            </tbody>
        </table>
</TablePanel>
);

通过打消这个代码块，咱们最终只失去了 TablePanel，这是咱们在每个组件中应用的通用 UI 包装器。

Return (
<TablePanel title=”Recent Sales”>
</TablePanel>
);

此时，咱们当初能够在 TablePanel 中插入 SpreadJS SpreadSheets 组件。请留神，SpreadSheets 组件可能蕴含一个或多个工作表，就像 Excel 工作簿可能蕴含一个或多个工作表一样。

Return (<TablePanel key={config.chartKey} title=”Recent Sales”>
        <SpreadSheets hostClass={config.hostClass}>
            <Worksheet name={config.sheetName} dataSource={tableData} autoGenerateColumns={config.autoGenerateColumns}>
                <Column width={50} dataField=’id’headerText=”ID”></Column>
                <Column width={200} dataField=’client’headerText=”Client”></Column>
                <Column width={320} dataField=’description’headerText=”Description”></Column>
                <Column width={100} dataField=’value’headerText=”Value”formatter={config.priceFormatter} resizable=”resizable”></Column>
                <Column width={100} dataField=’itemCount’headerText=”Quantity”></Column>
                <Column width={100} dataField=’soldBy’headerText=”Sold By”></Column>
                <Column width={100} dataField=’country’headerText=”Country”></Column>                   
            </Worksheet>
        </SpreadSheets>
</TablePanel>
);

作为画龙点睛的一笔，咱们将以下这些行增加到 App.css 文件中以修复电子表格的尺寸，以便该组件占据底部面板的整个宽度和销售仪表板页面的适当高度。

/*SpreadJS Spreadsheet Styling*/ 
.container.spreadsheet {
width: 100% !important;
height: 400px !important;
border: 1px solid lightgray !important;
padding-right: 0;
padding-left: 0;
}

而且……瞧！这为咱们提供了上面令人惊叹的电子表格：

请留神，SpreadJS 工作表如何为咱们提供与 Excel 电子表格雷同的外观。

在 Worksheet 组件中，咱们能够看到 Column 组件，它定义了每一列的特色，例如宽度、绑定字段和题目文本。咱们还在销售价值列中增加了货币格局。

与旧的动态表一样，新的 SpreadJS 电子表格组件从仪表板传递的道具接收数据。如你所见，电子表格容许你间接更改值，就像在 Excel 电子表格中一样。然而，正如你对 React 应用程序所冀望的那样，这些更改不会主动反映在其余组件中。为什么呢？

从仪表板接收数据后，SpreadJS 工作表开始应用正本，而不是仪表板组件中申明的销售数据。事件和函数应该解决任何数据批改以相应地更新应用程序的状态。

对于下一个工作，你必须使应用程序反映对所有 Dashboard 组件上的 SpreadJS 工作表所做的更改。

Step 3: SpreadJS 实现响应式数据绑定
目前，在 Dashboard.js 文件中申明的销售常量负责保护应用程序的状态。

Const sales = recentSales;

正如咱们所看到的，这种构造意味着静态数据，阻止了咱们心愿实现的动静更新。因而，咱们将用称为钩子的赋值替换那行代码。在 React 中，钩子具备简化的语法，能够同时提供状态值和处理函数的申明。

Const[sales, setSales] = new useState(recentSales);

下面的代码行显示了 JavaScript 数组解构语法。useState 函数用于申明销售常量，它保留状态数据，以及 setSales，它援用仅在一行中更改销售数组的函数。

然而，咱们的应用程序中还不存在这个 useState 函数。咱们须要从 Dashboard.js 组件文件结尾的 React 包中导入它：

import React, {useState} from‘react’;

当初，咱们筹备在必要时更新 sales 数组的状态。

咱们心愿将对工作表所做的更改流传到仪表板的其余部分。因而，咱们必须订阅一个事件来检测对 Worksheet 组件单元格所做的更改，并在 SalesTable.js 文件中实现相应的事件处理。

咱们将此事件处理程序称为 handleValueChanged。

<SpreadSheets hostClass={config.hostClass} valueChanged={handleValueChanged}>

咱们依然须要实现一个同名的函数。在其中，咱们获取工作表的已更改数据源数组，并将该数组传递给名为 valueChangeCallback 的函数。

Function handleValueChanged(e, obj) {valueChangedCallback(obj.sheet.getDataSource());
}
handleValueChanged.bind(this);

而后将 valueChangedCallback 函数从 Dashboard 传递到 SalesTable 组件：

<SalesTable tableData={salesTableData()} 
valueChangedCallback={handleValueChanged}/>

当初，你必须将此回调函数作为参数传递给 SalesTable 组件：

export const SalesTable = ({tableData, valueChangedCallback} ) => {

对工作表中单元格的任何更改都会触发回调函数，该函数会执行 Dashboard 组件中的 handleValueChanged 函数。上面的 handleValueChanged 函数必须在 Dashboard 组件中创立。它调用 setSales 函数，该函数更新组件的状态。因而，更改会流传到应用程序的其余组件。

Function handleValueChanged(tableData) {setSales(tableData.slice(0));
}

你能够通过编辑一些销售额值并查看仪表板顶部的销售额变动来尝试此操作：

看起来比尔的销售业绩不错！

Step 4: 实现导入导出 Excel
到目前为止，咱们曾经理解了如何用 SpreadJS 电子表格替换动态销售表。咱们还学习了如何通过 React 的钩子和回调在应用程序组件上流传数据更新。咱们设法用很少的代码提供了这些性能。你的应用程序看起来曾经很棒了，并且你置信它将给你将来的客户留下深刻印象。但在此之前，让咱们精益求精。

你曾经晓得你的企业用户在日常生活中常常应用 Excel。雷同的用户将开始在 React 和 SpreadJS 之上应用你的全新应用程序。但在某些时候，他们会错过 Excel 和你杰出的仪表板之间的集成。

如果你只能将电子表格数据导出到 Excel 并将数据从 Excel 导入到 SpreadJS，则该应用程序将更加弱小。你如何实现这些性能？

让咱们再次进行应用程序并装置 GrapeCity 的 Spread.Sheets 客户端 Excel IO 包以及文件爱护程序包：

> npm install @grapecity/spread-excelio
> npm install file-saver
> npm start

要将数据从咱们的应用程序导出到 Excel 文件（扩大名为 .xlsx），咱们必须批改 SalesTable 组件，申明 Excel IO 和文件爱护程序组件的导入。

Import {IO} from“@grapecity/spread-excelio”;
import {saveAs} from‘file-saver’;

接下来，咱们将更改 SalesTable.js 文件的 JSX 代码，以增加一个按钮以将 SpreadJS 工作表数据导出到本地文件。单击该按钮将触发一个名为 exportSheet 的事件处理程序。

{/* EXPORT TO EXCEL */}
<div className=”dashboardRow”>
        <button className=”btn btn-primary dashboardButton”onClick={exportSheet}>Export to Excel</button>
</div>
</TablePanel>

反过来，exportSheet 函数会将工作表中的数据保留到名为 SalesData.xslx 的文件中。该函数首先将 Spread 对象中的数据序列化为 JSON 格局，而后通过 Excel IO 对象将其转换为 Excel 格局。

Function exportSheet() {
const spread = _spread;
const  ilename =“SalesData.xlsx”;
const sheet = spread.getSheet(0);
const excelIO = new IO();
const json = JSON.stringify(spread.toJSON({ 
        includeBindingSource: true,
        columnHeadersAsFrozenRows: true,
}));
excelIO.save(json, (blob) => {saveAs(blob,  ilename);
}, function € {al€(});     
}

请留神上述函数如何须要一个开展对象，该对象必须与咱们在 SalesTable 组件中应用的 SpreadJS 工作表的实例雷同。一旦定义了 SpreadSheet 对象，下面清单中的 getSheet(0) 调用就会检索电子表格数组中的第一个工作表：

const sheet = spread.getSheet(0);

然而咱们如何以编程形式获取电子表格的实例呢？

一旦电子表格对象被初始化，SpreadJS 库就会触发一个名为 workbookInitialized 的事件。咱们必须解决它并将实例存储为 SalesTable 组件的状态。让咱们首先应用 useState 钩子为电子表格实例申明一个状态常量：

const [_spread, setSpread] = useState({});

咱们须要将 useState 函数导入到 SalesTable.js 组件文件结尾的 React 申明中：

import React, {useState}‘from’react';

当初咱们能够申明一个函数来解决 workbookInit 事件……

function workbookInit(sprea 
    setSpread(spread) 
}

… 而后将 workbookInit 事件绑定到咱们刚刚创立的函数：

<SpreadSheets hostClass={config.hostClass} workbookInitialized={workbookInit} valueChanged={handleValueChanged}>

当初，“导出到 Excel”按钮将如下所示：

当初咱们来演示如何实现 Excel 数据导入。这个过程是导出的逆过程，所以让咱们从 XLSX 文件开始。

此性能的拜访点是另一个按钮，咱们须要将其增加到 SalesTable 组件的 JSX 代码的开端。请留神，这里咱们应用不同的按钮类型：“文件”类型的输出元素，它产生一个抉择文件的按钮。当文件被选中时，onChange 事件触发 fileChangeevent 处理程序：

<div clas”Name="dashbo”rd>
    {/* EXPORT TO EXCE}
    <button clas”Name="btn btn-primary dashboard”utton" 
      onClick={exportSheet}>Export to Excel</bu>
    {/* IMPORT FROM EXCE}
    <div>
        <b>Import Excel File:</b>
        <div>
            <input”type”"file" clas”Name="file”elect" 
              onCh€e={(e) => f€Change(e)} />
    </div>
    </div>
</div>

反过来，fileChange 函数将应用 Excel IO 对象将文件导入工作表对象。在函数完结时，会触发一个 fileImportedCallback 事件，将数据带到 Dashboard 组件中：

functio€hange(e) {if (_spread) {
        const fileDom = e.target || e.srcElement;
        const excelIO = new IO();
        const spread = _spread;
        const deserializationOptions = {frozenRowsAsColumnHeaders: true};
        excelIO.open(fileDom.files[0], (data) => {const newSalesData = extractSheetData(data);
            fileImportedCallback(newSalesData});
    }
}

然而这个回调须要申明为 SalesTable 组件的参数：

export const SalesTable = ({ tableData, valueChangedCallback, 
fileImportedCallback } ) => {

此外，咱们必须通过从 util.js 文件中导入来为 SalesTable 组件提供 extractSheetData 函数：

import {extractSh“etData} from "”./util/util.js";

咱们须要为 Dashboard 组件上的保留文件实现事件处理程序。这个函数惟一要做的就是应用来自 SpreadJS 工作表的数据更新仪表板的状态。

function handleFileImportewSales) {setSales(newSales.slice(0));
}

<SalesTable tableData={saleleData()} 
    valueChangedCallback={handleValueChanged}
fileImportedCallback={handleFileImported}/>

只需几个简略的步骤，咱们就能够将带有静态数据的无聊应用程序变成以具备 Excel 导入和导出性能的电子表格为核心的响应式应用程序。最初，你查看客户的申请并验证你的应用程序是否满足所有要求！

咱们能够扩大这些想法并为咱们的应用程序摸索其余令人兴奋的性能。例如，咱们能够主动、静默地保留工作表数据，从而在须要时保留更改日志和回滚谬误到表中。

此外，你能够将表格数据与近程数据库同步。或者你能够实现一个保留按钮，通过 Web 服务办法将表数据复制到内部零碎。

更多纯前端表格在线 demo 示例 :https://demo.grapecity.com.cn…
纯前端表格利用场景：https://www.grapecity.com.cn/…
挪动端示例（可扫码体验）：http://demo.grapecity.com.cn/…