言

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則面向企業級需求，提供一站式的商務智能和數據可視化解決方案。

詳細功能總結如下：

無論哪種工具，都是為我們進行數據可視化目標呈現服務的，所以不用非此即彼哈。

好了，周末愉快~