React.js前端導(dǎo)出Excel的方式
前言
前段時間，項目上有個需求需要將數(shù)據(jù)報表導(dǎo)出為 excel 的需求，這本來是后端的工作，前端只需要一個 a 標簽，就可以下載文件，但不巧的是，正好遇到后端請假，而且項目比較著急，那么前端是否可以實現(xiàn)呢？
實現(xiàn)方式
經(jīng)過一頓搜索后，發(fā)現(xiàn)有這么幾個 npm 庫
- react-csv
- 根據(jù)給定的數(shù)據(jù)生成 CSV 文件，數(shù)據(jù)可以是二維數(shù)組、對象數(shù)組或字符串。
- xlsx 進入 xlsx 官網(wǎng)，官網(wǎng)稱為 SheetJS，它支持瀏覽器、nodejs、deno、和 react-native，瀏覽器兼容 ie10+。 SheetJS 社區(qū)版提供經(jīng)過實戰(zhàn)考驗的開源解決方案，用于從幾乎所有復(fù)雜的電子表格中提取有用的數(shù)據(jù)，并生成新的電子表格，這些新的電子表格可以與傳統(tǒng)軟件和現(xiàn)代軟件一起使用。
csv 與 Excel 的區(qū)別
從名字上看一個是導(dǎo)出 csv，一個是導(dǎo)出 excel，那么這 2 者有什么區(qū)別呢？
Excel 是一個電子表格，將文件保存為自己的專有格式，即 xls 或 xlsx，它保存有關(guān)工作簿中所有工作表的信息
CSV 代表 Comma Separated Values ，這是一個純文本格式，用逗號分隔一系列值，但不包含格式，公式，宏等，擴展名為.csv 的分隔文本文件的格式
總結(jié)來說，Excel 不僅可以存儲數(shù)據(jù)，還可以對數(shù)據(jù)進行操作，CSV 文件只是一個文本文件，它存儲數(shù)據(jù)，它也被稱為平面文件，任何用于解析 Excel 數(shù)據(jù)的編程語言庫通常都會更大，更慢，更復(fù)雜，任何編程語言來解析 CSV 數(shù)據(jù)是微不足道的，生成它是非常容易的。
react-csv
實現(xiàn)代碼
import React from 'react';
import { CSVLink } from 'react-csv';
const headers = [
{ label: 'First Name', key: 'firstname' },
{ label: 'Last Name', key: 'lastname' },
{ label: 'Email', key: 'email' },
];
const data = [
{ firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
{ firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
{ firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
export default function App() {
return (
<CSVLink data={data} headers={headers}>
Download me
</CSVLink>
);
}
react-csv 使用非常簡單，只需要 npm 安裝后就可以使用，使用 headers 字段可以指定表頭。
xlsx
xlsx 官網(wǎng)有數(shù)據(jù)導(dǎo)入、數(shù)據(jù)導(dǎo)出、數(shù)據(jù)處理等功能，非常強大，這里我們只處理數(shù)據(jù)到功能。
cdn 方式
- 首先確保頁面上有一個表格，并且有一個唯一 ID:
<table id="TableToExport">
- 在頁面上引入 SheetJS
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
- 添加一個按鈕用于導(dǎo)出 Excel
<button id="sheetjsexport"><b>導(dǎo)出 XLSX</b></button>
- 綁定點擊事件:
document.getElementById("sheetjsexport").addEventListener('click', function() {
/*根據(jù)頁面上的表格創(chuàng)建工作表 */
var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
/* 導(dǎo)出文件下載 */
XLSX.writeFile(wb, "SheetJSTable.xlsx");
});
在 react 中使用
function Table2XLSX(props) {
const xport = async () => {
const table = document.getElementById("Table2XLSX");
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, "SheetJSTable.xlsx");
};
return (<>
<table id="Table2XLSX"><tbody>
<tr><td colSpan="3">SheetJS Table Export</td></tr>
<tr><td>Author</td><td>ID</td><td>Note</td></tr>
<tr><td>SheetJS</td><td>7262</td><td>Hi!</td></tr>
<tr><td colSpan="3">
<a rel="external nofollow" >Powered by SheetJS</a>
</td></tr>
</tbody></table>
<button onClick={xport}><b>Export XLSX!</b></button>
</>);
}
以上方法是將頁面上的表格轉(zhuǎn)為 excel，那么能否跟 react-csv 一樣json 轉(zhuǎn) excel 呢？
json 轉(zhuǎn) excel
/**
* 導(dǎo)出 excel 文件
* @param array JSON 數(shù)組
* @param sheetName 第一張表名
* @param fileName 文件名
*/
export function exportExcelFile(array=[], sheetName = 'sheet表', fileName = 'example.xlsx') {
const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
const workBook = {
SheetNames: [sheetName],
Sheets: {
[sheetName]: jsonWorkSheet,
}
};
return xlsx.writeFile(workBook, fileName);
}
xlsx.utils.json_to_sheet 可以將 JSON 數(shù)據(jù)存儲到 sheet 中，然后使用 xlsx.writeFile 寫入文件并且下載。
<button
disabled={dataSource.length === 0}
onClick={() => exportExcelFile(dataSource)}
>
導(dǎo)出 Excel
</button>
結(jié)語
如果你有多個 Sheet 要導(dǎo)出成一個 excel，就只能使用 xlsx，其實對于我們的項目需求，只有個表要導(dǎo)出使用 xlsx 和 csv 都可以，如果導(dǎo)出的數(shù)據(jù)需要給其他程序處理，建議使用 csv 格式，數(shù)據(jù)會比較好處理。
以上就是React.js前端導(dǎo)出Excel的方式的詳細內(nèi)容，更多關(guān)于React.js前端導(dǎo)出Excel的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
forwardRef 相當(dāng)于是為 ref 傳遞的一種方式,普通的函數(shù)式組件就是 Render,而 fowardRef 多加了 Ref 參數(shù),這篇文章主要介紹了React 中的 ForwardRef的使用示例詳解,需要的朋友可以參考下2024-06-06
React18+TS通用后臺管理系統(tǒng)解決方案落地實戰(zhàn)示例
這篇文章主要為大家介紹了React18+TS通用后臺管理系統(tǒng)解決方案落地實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文主要介紹了React 中合成事件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
React useEffect、useLayoutEffect底層機制及區(qū)別介紹
useEffect 是 React 中的一個 Hook,允許你在函數(shù)組件中執(zhí)行副作用操作,本文給大家介紹React useEffect、useLayoutEffect底層機制及區(qū)別介紹,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux使用,需要的朋友可以參考下2022-08-08
next-redux-wrapper使用細節(jié)及源碼分析
這篇文章主要為大家介紹了next-redux-wrapper使用細節(jié)及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11