言

React 18 的发布带来了一系列全新的特性和改进，其中包括对并发渲染、状态管理等方面的增强。在这篇文章中，我们将利用 React 18 的强大功能，演示如何使用 React 18 编写 Excel 文件的导出与在线预览功能。

第一部分：Excel 文件导出

1. 安装依赖

首先，确保你的项目已经升级到 React 18，并安装最新版本的 xlsx 库。

npm install xlsx@0.17.1-alpha.3 react@18 react-dom@18 --save

2. 创建导出组件

创建一个名为 ExcelExport 的组件，并利用 react/jsx-concurrent-mode 特性实现并发渲染。

import React, { unstable_ConcurrentMode as ConcurrentMode } from 'react';
import * as XLSX from 'xlsx';
const ExcelExport=()=> {
const exportToExcel=()=> {
const data=[
['姓名', '年龄'],
['Alice', 25],
['Bob', 30],
['Charlie', 22],
];
const ws=XLSX.utils.aoa_to_sheet(data);
const wb=XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'exported_data.xlsx');
};
return (
<ConcurrentMode>
<div>
<button onClick={exportToExcel}>导出Excel</button>
</div>
</ConcurrentMode>
);
};
export default ExcelExport;

3. 实现导出逻辑

在 exportToExcel 方法中，我们依然使用 xlsx 库创建工作簿并导出文件，与 React 18 的并发渲染特性无缝集成。

第二部分：在线预览 Excel 文件

1. 安装依赖

为了实现在线预览，我们依然使用 react-excel-renderer 库。

npm install react-excel-renderer --save

2. 创建预览组件

创建一个名为 ExcelPreview 的组件，并利用 React 18 的 Concurrent Mode 实现并发渲染。
import React, { useState } from 'react';
import ReactDataSheet from 'react-datasheet';
import 'react-datasheet/lib/react-datasheet.css';
import { OutTable, ExcelRenderer } from 'react-excel-renderer';
const ExcelPreview=()=> {
const [dataLoaded, setDataLoaded]=useState(false);
const [rows, setRows]=useState([]);
const [cols, setCols]=useState([]);
const fileHandler=(event)=> {
let fileObj=event.target.files[0];
ExcelRenderer(fileObj, (err, resp)=> {
if (err) {
console.log(err);
} else {
setDataLoaded(true);
setCols(resp.cols);
setRows(resp.rows);
}
});
};
return (
<ConcurrentMode>
<div>
<input
type="file"
onChange={(event)=> fileHandler(event)}
style={{ padding: '10px' }}
/>
{dataLoaded && (
<ReactDataSheet
data={rows}
valueRenderer={(cell)=> cell.value}
sheetRenderer={(props)=> <OutTable {...props} />}
/>
)}
</div>
</ConcurrentMode>
);
};
export default ExcelPreview;

3. 文件上传与在线预览

在 fileHandler 方法中，我们仍然使用 react-excel-renderer 从上传的Excel文件中提取数据，并将其渲染到 ReactDataSheet 中。这里也充分利用了 React 18 的 Concurrent Mode 特性，提升了渲染性能。

结语

通过这篇文章，我们学习了如何在 React 18 中实现 Excel 文件的导出和在线预览。React 18 带来的并发渲染特性能够更好地处理大规模数据，提高了性能和用户体验。希望这份指南帮助你更好地利用 React 18 的新特性，完成一些常见的前端任务。

原文链接：https://juejin.cn/post/7315260397371392015

、背景

现在web技术蓬勃发展，办公应用特别是excel都搬到了线上，比较流行的有腾讯文档，金山文档，石墨文档，google doc，这些都属于企业服务。但是小型企业或者团队，如果想自己搭建一套在线表格系统呢？有没有开源的方案？

当然是有的，一些表格具有相对简单的功能，只能显示数据和过滤器功能，或者某些表格支持多种单元格样式，但是此类功能需要付费。比较出名有spreadjs，handsontable，这两个插件有明显的缺点，spreadjs增值功能收费太贵，handsontable二次开发坑很多。

Luckysheet ，是一款国产的纯JS实现的类似excel的在线表格，功能强大、配置简单、完全开源。

Luckysheet是用纯JavaScript编写的前端表格库，可以嵌入到任何前端项目或应用程序中，增强原有的系统功能，而无需使用excel或其他复杂的软件进行数据处理。

这使我们的数据处理、分析、显示和存储可以由一个系统完成，而无需切换平台，不切换系统，便于集成和完全自动化。

2、介绍

“我们决心制作一个功能最丰富，配置和使用最简单的开源电子表格-Luckysheet，为企业报表平台和数据分析平台提供支持，并建立一个数据分析社区。具体来说，我们提供了一个类似于excel的在线编辑表格，其中包含单元格样式，公式，过滤，冻结和其他功能。我们基本支持excel的常用功能，数据分析，显示和编辑的需求。” —Luckysheet作者

Luckysheet ，是一款国产的纯JS实现的类似excel的在线表格，功能强大、配置简单、完全开源。

开源地址：https://gitee.com/mengshukeji/Luckysheet

在线文档：https://mengshukeji.github.io/LuckysheetDocs/zh/guide

在线演示：https://mengshukeji.gitee.io/luckysheetdemo

3、基本使用

要使用LuckySheet，有2种方式，可以从官网下载JS，然后引入本地页面，也可以引入CDN。

3.1 引入JS

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

3.2 置放Excel容器

<div id="luckysheet"></div>

3.3 初始化Excel

<script>
    $(function () {
        //配置项
        var options={
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>

这样，一个在线Excel就完成了。LuckySheet只提供前端的操作，数据保存要由开发人员自己实现。

3.4 数据保存

数据保存分为两种，一种是：实时保存，一种是“全部保存”。实时保存比较复杂，现在介绍一种简单的全部保存方法。

LuckySheet提供了一个 luckysheet.getAllSheets() 方法，调用此方法，Luckysheet系统会把所有数据一股脑的传递给你，
你可以再页面的OnClick的保存事件里保存这些数据，然后利用Jquery的Post方法，接收数据写入数据库。

下面代码演示了把Luckysheet POST到 xls.aspx 页面

function save() {
             var data2=luckysheet.getAllSheets();
             var cnt=JSON.stringify(data2);
             $.post("xls.aspx",   {
                 cnt: cnt
             });
 }

在 xls.aspx页面，利用 Request[“cnt”] 就可以获取所有数据，然后保存到数据库。

3.5 数据还原

LuckySheet提供了loadUrl属性，当前端初始化完毕后，luckysheet会调用此属性加载初始化数据。所以，利用此属性，可以还原数据库里保存的数据。

var options={
                  container: 'luckysheet',
                  lang: 'zh',
                  showinfobar: false, 
                  row: 20,
                  column: 15,
                  plugins: ['chart'],
                  showstatisticBar: false,
                  loadUrl: 'data.aspx?id=11', //还原数据URL
                  showsheetbar: false,
                  showsheetbarConfig: {
                      add: false,
                      menu: false,
                  }

4、数据缓存

（1） Luckysheet允许在本地加载Luckysheet需要的JS,CSS等，但是这些JS、CSS比较大，为此，可以利用link的prefetch预加载CSS,JS。

  <link rel="prefetch" href="../javascript/luckysheet/plugins/css/pluginsCss.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/plugins/plugins.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/css/luckysheet.css"  />
  <link rel="prefetch" href="../javascript/luckysheet/assets/iconfont/iconfont.css"  /> 
  <link rel="prefetch" href="../javascript/luckysheet/plugins/js/plugin.js"  />
  <link rel="prefetch" href="../javascript/luckysheet/luckysheet.umd.js"  />

（2）Luckysheet在插入图片时，图片会议Base64格式存储，所以，最终保存的数据可能非常大。

（3）需要理解Excel的一些简单概念：一个Excel是由多个Sheet组成，而一个Sheet是由多个Cell组成，而每个单元格都会包括 r，c，v（r:单元格的行 row、c：单元格的列 column、 v：单元格的值 value），在使用实时保存时， 二维数组数据转化成 {r, c, v}格式 一维数组。实时保存数据量小，但是比较复杂。

5、导入导出

LuckySheet提供了一个LuckyExcel，他支持Excel的导入和导出。

演示：https://mengshukeji.gitee.io/luckyexceldemo

6、生成图表

Luckysheet可以使用Echart生成图表组件（饼形图，柱状图，曲线图等）。

于Power BI和Tableau的内容相近，且Power BI 更偏向于与微软技术生态紧密结合，有更低的门槛，Tableau与BI的能力重合范围较大，目前以Power BI为代表，进行此类软件的探讨。

对标题中的Excel、JavaScript和Power BI，可以先说结论：

Excel更适合小型数据集和个人用户的基础可视化需求

JavaScript库在Web开发环境下提供高度定制化的可视化方案

Power BI则面向企业级需求，提供一站式的商务智能和数据可视化解决方案。

详细功能总结如下：

无论哪种工具，都是为我们进行数据可视化目标呈现服务的，所以不用非此即彼哈。

好了，周末愉快~