整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
React 18 的發(fā)布帶來了一系列全新的特性和改進(jìn)，其中包括對(duì)并發(fā)渲染、狀態(tài)管理等方面的增強(qiáng)。在這篇文章中，我們將利用 React 18 的強(qiáng)大功能，演示如何使用 React 18 編寫 Excel 文件的導(dǎo)出與在線預(yù)覽功能。
首先，確保你的項(xiàng)目已經(jīng)升級(jí)到 React 18，并安裝最新版本的 xlsx 庫(kù)。
npm install xlsx@0.17.1-alpha.3 react@18 react-dom@18 --save創(chuàng)建一個(gè)名為 ExcelExport 的組件，并利用 react/jsx-concurrent-mode 特性實(shí)現(xiàn)并發(fā)渲染。
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}>導(dǎo)出Excel</button>
</div>
</ConcurrentMode>
);
};
export default ExcelExport;在 exportToExcel 方法中，我們依然使用 xlsx 庫(kù)創(chuàng)建工作簿并導(dǎo)出文件，與 React 18 的并發(fā)渲染特性無縫集成。
為了實(shí)現(xiàn)在線預(yù)覽，我們依然使用 react-excel-renderer 庫(kù)。
npm install react-excel-renderer --save創(chuàng)建一個(gè)名為 ExcelPreview 的組件，并利用 React 18 的 Concurrent Mode 實(shí)現(xiàn)并發(fā)渲染。
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;在 fileHandler 方法中，我們?nèi)匀皇褂?react-excel-renderer 從上傳的Excel文件中提取數(shù)據(jù)，并將其渲染到 ReactDataSheet 中。這里也充分利用了 React 18 的 Concurrent Mode 特性，提升了渲染性能。
通過這篇文章，我們學(xué)習(xí)了如何在 React 18 中實(shí)現(xiàn) Excel 文件的導(dǎo)出和在線預(yù)覽。React 18 帶來的并發(fā)渲染特性能夠更好地處理大規(guī)模數(shù)據(jù)，提高了性能和用戶體驗(yàn)。希望這份指南幫助你更好地利用 React 18 的新特性，完成一些常見的前端任務(wù)。
原文鏈接：https://juejin.cn/post/7315260397371392015
現(xiàn)在web技術(shù)蓬勃發(fā)展，辦公應(yīng)用特別是excel都搬到了線上，比較流行的有騰訊文檔，金山文檔，石墨文檔，google doc，這些都屬于企業(yè)服務(wù)。但是小型企業(yè)或者團(tuán)隊(duì)，如果想自己搭建一套在線表格系統(tǒng)呢？有沒有開源的方案？
當(dāng)然是有的，一些表格具有相對(duì)簡(jiǎn)單的功能，只能顯示數(shù)據(jù)和過濾器功能，或者某些表格支持多種單元格樣式，但是此類功能需要付費(fèi)。比較出名有spreadjs，handsontable，這兩個(gè)插件有明顯的缺點(diǎn)，spreadjs增值功能收費(fèi)太貴，handsontable二次開發(fā)坑很多。
Luckysheet ，是一款國(guó)產(chǎn)的純JS實(shí)現(xiàn)的類似excel的在線表格，功能強(qiáng)大、配置簡(jiǎn)單、完全開源。
Luckysheet是用純JavaScript編寫的前端表格庫(kù)，可以嵌入到任何前端項(xiàng)目或應(yīng)用程序中，增強(qiáng)原有的系統(tǒng)功能，而無需使用excel或其他復(fù)雜的軟件進(jìn)行數(shù)據(jù)處理。
這使我們的數(shù)據(jù)處理、分析、顯示和存儲(chǔ)可以由一個(gè)系統(tǒng)完成，而無需切換平臺(tái)，不切換系統(tǒng)，便于集成和完全自動(dòng)化。
“我們決心制作一個(gè)功能最豐富，配置和使用最簡(jiǎn)單的開源電子表格-Luckysheet，為企業(yè)報(bào)表平臺(tái)和數(shù)據(jù)分析平臺(tái)提供支持，并建立一個(gè)數(shù)據(jù)分析社區(qū)。具體來說，我們提供了一個(gè)類似于excel的在線編輯表格，其中包含單元格樣式，公式，過濾，凍結(jié)和其他功能。我們基本支持excel的常用功能，數(shù)據(jù)分析，顯示和編輯的需求。” —Luckysheet作者
Luckysheet ，是一款國(guó)產(chǎn)的純JS實(shí)現(xiàn)的類似excel的在線表格，功能強(qiáng)大、配置簡(jiǎn)單、完全開源。
開源地址：https://gitee.com/mengshukeji/Luckysheet
在線文檔：https://mengshukeji.github.io/LuckysheetDocs/zh/guide
在線演示：https://mengshukeji.gitee.io/luckysheetdemo
要使用LuckySheet，有2種方式，可以從官網(wǎng)下載JS，然后引入本地頁面，也可以引入CDN。
<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><div id="luckysheet"></div><script>
$(function () {
//配置項(xiàng)
var options={
container: 'luckysheet' //luckysheet為容器id
}
luckysheet.create(options)
})
</script>這樣，一個(gè)在線Excel就完成了。LuckySheet只提供前端的操作，數(shù)據(jù)保存要由開發(fā)人員自己實(shí)現(xiàn)。
數(shù)據(jù)保存分為兩種，一種是：實(shí)時(shí)保存，一種是“全部保存”。實(shí)時(shí)保存比較復(fù)雜，現(xiàn)在介紹一種簡(jiǎn)單的全部保存方法。
LuckySheet提供了一個(gè) luckysheet.getAllSheets() 方法，調(diào)用此方法，Luckysheet系統(tǒng)會(huì)把所有數(shù)據(jù)一股腦的傳遞給你，
你可以再頁面的OnClick的保存事件里保存這些數(shù)據(jù)，然后利用Jquery的Post方法，接收數(shù)據(jù)寫入數(shù)據(jù)庫(kù)。
下面代碼演示了把Luckysheet POST到 xls.aspx 頁面
function save() {
var data2=luckysheet.getAllSheets();
var cnt=JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt
});
}在 xls.aspx頁面，利用 Request[“cnt”] 就可以獲取所有數(shù)據(jù)，然后保存到數(shù)據(jù)庫(kù)。
LuckySheet提供了loadUrl屬性，當(dāng)前端初始化完畢后，luckysheet會(huì)調(diào)用此屬性加載初始化數(shù)據(jù)。所以，利用此屬性，可以還原數(shù)據(jù)庫(kù)里保存的數(shù)據(jù)。
var options={
container: 'luckysheet',
lang: 'zh',
showinfobar: false,
row: 20,
column: 15,
plugins: ['chart'],
showstatisticBar: false,
loadUrl: 'data.aspx?id=11', //還原數(shù)據(jù)URL
showsheetbar: false,
showsheetbarConfig: {
add: false,
menu: false,
}（1） Luckysheet允許在本地加載Luckysheet需要的JS,CSS等，但是這些JS、CSS比較大，為此，可以利用link的prefetch預(yù)加載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在插入圖片時(shí)，圖片會(huì)議Base64格式存儲(chǔ)，所以，最終保存的數(shù)據(jù)可能非常大。
（3）需要理解Excel的一些簡(jiǎn)單概念：一個(gè)Excel是由多個(gè)Sheet組成，而一個(gè)Sheet是由多個(gè)Cell組成，而每個(gè)單元格都會(huì)包括 r，c，v（r:單元格的行 row、c：?jiǎn)卧竦牧?column、 v：?jiǎn)卧竦闹?value），在使用實(shí)時(shí)保存時(shí)， 二維數(shù)組數(shù)據(jù)轉(zhuǎn)化成 {r, c, v}格式 一維數(shù)組。實(shí)時(shí)保存數(shù)據(jù)量小，但是比較復(fù)雜。
LuckySheet提供了一個(gè)LuckyExcel，他支持Excel的導(dǎo)入和導(dǎo)出。
演示：https://mengshukeji.gitee.io/luckyexceldemo
Luckysheet可以使用Echart生成圖表組件（餅形圖，柱狀圖，曲線圖等）。
于Power BI和Tableau的內(nèi)容相近，且Power BI 更偏向于與微軟技術(shù)生態(tài)緊密結(jié)合，有更低的門檻，Tableau與BI的能力重合范圍較大，目前以Power BI為代表，進(jìn)行此類軟件的探討。
對(duì)標(biāo)題中的Excel、JavaScript和Power BI，可以先說結(jié)論：
Excel更適合小型數(shù)據(jù)集和個(gè)人用戶的基礎(chǔ)可視化需求
JavaScript庫(kù)在Web開發(fā)環(huán)境下提供高度定制化的可視化方案
Power BI則面向企業(yè)級(jí)需求，提供一站式的商務(wù)智能和數(shù)據(jù)可視化解決方案。
詳細(xì)功能總結(jié)如下：
功能點(diǎn) | Excel | JavaScript（如D3.js、Chart.js等） | Power BI |
數(shù)據(jù)導(dǎo)入與連接 | 導(dǎo)入本地文件，連接少數(shù)在線數(shù)據(jù)源 | 可連接多種本地和在線數(shù)據(jù)源，通過API調(diào)用獲取數(shù)據(jù) | 大量本地與在線數(shù)據(jù)源連接，支持實(shí)時(shí)數(shù)據(jù)流 |
數(shù)據(jù)處理與建模 | 支持基礎(chǔ)數(shù)據(jù)清洗、排序、篩選和匯總 | 需配合編程進(jìn)行復(fù)雜數(shù)據(jù)處理和建模 | 強(qiáng)大的數(shù)據(jù)清洗、建模和DAX計(jì)算，支持高級(jí)數(shù)據(jù)關(guān)系 |
可視化類型 | 內(nèi)置多種基本圖表，有限的自定義能力 | 極高自定義性，可創(chuàng)建復(fù)雜、獨(dú)特且動(dòng)態(tài)的可視化 | 內(nèi)置豐富圖表類型，通過自定義視覺和高級(jí)圖表擴(kuò)展 |
交互性 | 支持基礎(chǔ)的交互如過濾、排序 | 高度交互性，動(dòng)態(tài)數(shù)據(jù)綁定，事件驅(qū)動(dòng) | 高級(jí)交互式儀表板，支持切片器、聯(lián)動(dòng)過濾等 |
實(shí)時(shí)更新 | 需手動(dòng)刷新數(shù)據(jù) | 實(shí)時(shí)或定時(shí)更新，取決于代碼實(shí)現(xiàn) | 支持實(shí)時(shí)數(shù)據(jù)刷新和自動(dòng)更新 |
協(xié)作與分享 | 文件分享，版本控制有限 | 適合Web應(yīng)用分享，實(shí)時(shí)協(xié)作需要額外配置 | 云端協(xié)作，支持報(bào)告分享和權(quán)限管理 |
自定義與擴(kuò)展性 | 自定義程度有限，可通過VBA擴(kuò)展 | 高度靈活，可根據(jù)需求完全自定義可視化 | 可通過自定義視覺和插件擴(kuò)展功能 |
企業(yè)級(jí)集成 | 有限的企業(yè)集成，適合中小型團(tuán)隊(duì) | 需配合企業(yè)級(jí)架構(gòu)實(shí)現(xiàn)集成 | 無縫集成微軟生態(tài)系統(tǒng)，企業(yè)級(jí)安全和管理 |
移動(dòng)端支持 | 有限的移動(dòng)端支持，需通過Office 365 | 適合移動(dòng)端Web應(yīng)用，響應(yīng)式設(shè)計(jì) | 優(yōu)秀的移動(dòng)端應(yīng)用，支持觸摸操作 |
無論哪種工具，都是為我們進(jìn)行數(shù)據(jù)可視化目標(biāo)呈現(xiàn)服務(wù)的，所以不用非此即彼哈。
好了，周末愉快~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
