React.js前端導出Excel的方式
前言
前段時間,項目上有個需求需要將數據報表導出為 excel 的需求,這本來是后端的工作,前端只需要一個 a
標簽,就可以下載文件,但不巧的是,正好遇到后端請假,而且項目比較著急,那么前端是否可以實現呢?
實現方式
經過一頓搜索后,發(fā)現有這么幾個 npm 庫
- react-csv
- 根據給定的數據生成 CSV 文件,數據可以是二維數組、對象數組或字符串。
- xlsx 進入 xlsx 官網,官網稱為 SheetJS,它支持瀏覽器、nodejs、deno、和 react-native,瀏覽器兼容 ie10+。 SheetJS 社區(qū)版提供經過實戰(zhàn)考驗的開源解決方案,用于從幾乎所有復雜的電子表格中提取有用的數據,并生成新的電子表格,這些新的電子表格可以與傳統(tǒng)軟件和現代軟件一起使用。
csv 與 Excel 的區(qū)別
從名字上看一個是導出 csv,一個是導出 excel,那么這 2 者有什么區(qū)別呢?
Excel 是一個電子表格,將文件保存為自己的專有格式,即 xls 或 xlsx,它保存有關工作簿中所有工作表的信息
CSV 代表 Comma Separated Values ,這是一個純文本格式,用逗號分隔一系列值,但不包含格式,公式,宏等,擴展名為.csv 的分隔文本文件的格式
總結來說,Excel 不僅可以存儲數據,還可以對數據進行操作,CSV 文件只是一個文本文件,它存儲數據,它也被稱為平面文件,任何用于解析 Excel 數據的編程語言庫通常都會更大,更慢,更復雜,任何編程語言來解析 CSV 數據是微不足道的,生成它是非常容易的。
react-csv
實現代碼
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 官網有數據導入、數據導出、數據處理等功能,非常強大,這里我們只處理數據到功能。
cdn 方式
- 首先確保頁面上有一個表格,并且有一個唯一 ID:
<table id="TableToExport">
- 在頁面上引入 SheetJS
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
- 添加一個按鈕用于導出 Excel
<button id="sheetjsexport"><b>導出 XLSX</b></button>
- 綁定點擊事件:
document.getElementById("sheetjsexport").addEventListener('click', function() { /*根據頁面上的表格創(chuàng)建工作表 */ var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport")); /* 導出文件下載 */ 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> </>); }
以上方法是將頁面上的表格轉為 excel,那么能否跟 react-csv 一樣json 轉 excel 呢?
json 轉 excel
/** * 導出 excel 文件 * @param array JSON 數組 * @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 數據存儲到 sheet 中,然后使用 xlsx.writeFile
寫入文件并且下載。
<button disabled={dataSource.length === 0} onClick={() => exportExcelFile(dataSource)} > 導出 Excel </button>
結語
如果你有多個 Sheet 要導出成一個 excel,就只能使用 xlsx,其實對于我們的項目需求,只有個表要導出使用 xlsx 和 csv 都可以,如果導出的數據需要給其他程序處理,建議使用 csv 格式,數據會比較好處理。
以上就是React.js前端導出Excel的方式的詳細內容,更多關于React.js前端導出Excel的資料請關注腳本之家其它相關文章!
相關文章
D3.js(v3)+react 實現帶坐標與比例尺的散點圖 (V3版本)
散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸,數據是一組二維坐標,分別對應兩個坐標軸,與坐標軸對應的地方打上點。由此可以猜到,需要的元素包括circle(圓)和axis(坐標軸),接下來通過本文大家分享D3.js(v3)+react 實現帶坐標與比例尺的散點圖 (V3版本) ,一起看看2019-05-05