React使用xlsx和js-export-excel實現(xiàn)前端導出
背景
在數(shù)據(jù)量不太大,或者開發(fā)周期比較急迫的情況下,可以把導出excel功能放到前端實現(xiàn)。
這里筆者結合實際開發(fā)的經驗,由于我司開發(fā)技術選型為React,最終選擇
js-export-excel (1.1.4) 和 xlsx (0.18.5)
分別進行介紹如何實現(xiàn)前端導出excel功能。
前置數(shù)據(jù)模擬以及導出預期結果
mock導出的數(shù)據(jù)
const dataTable = [
{index: "1", name: "niko", age: "18", birth: "Mon Dec 11 10:08:15 CST 2023"},
{index: "1", name: "vivi", age: "16", birth: "Sun Dec 11 10:49:18 CST 2023"},
]
預期導出效果
只需要序號,姓名和年齡字段,且工作表名為個人信息表

js-export-excel
import ExportJsonExcel from 'js-export-excel';
const jsExportExcelHandle = (dataTable = []) => {
const option = [];
option.fileName = "個人信息文件";
const sheetData = dataTable; // 有需要映射的話需要先映射
const sheetFilter = ["index", "name", "age"];
const sheetHeader = ["序號", "姓名", "年齡"];
option.datas = [
{
sheetData,
sheetName: "個人信息表",
sheetFilter,
sheetHeader,
columnWidth: new Array(sheethaeader.length).fill(10); // 列寬
}
];
const toExcel = new ExportJsonExcel(option);
toExcel.saveExcel()
}
xlsx
import { utils, writeFile } from 'xlsx';
const xlsxHandle = (dataTable = []) => {
// 表頭映射為中文
const headerMap = {
index: "序號",
name: "姓名",
age: "年齡",
},
// 先過濾出需要的屬性
const headList = Object.keys(headerMap);
// 返回新的對象數(shù)組
const _dataTable = dataTable.map(item => {
const filteredItem = {};
Object.keys(item).forEach(key => {
if(headList.includes(key)){
filteredItem[key] = item[key];
}
})
return filteredItem
})
// xlsx需要轉為二維數(shù)組
const dataArr = _dataTable.map(item => Object.values(item));
// 將表頭映射為中文(name => 姓名)
const headerTranslated = Object.keys(headerMap).map(key => header[key]);//["序號", "年齡", "姓名"]
dataArr.unshif(headerTranslated); // 插入
const workSheet = utils.aoa_to_sheet(dataArr); // 轉為工作表對象
// 設置每個的單元格的列寬
workSheet["!cols"] = new Array(headList.length).fill({wch: 20}); // {!cols:(13)[{wch:20},...],A1:{v: "序號", t: "s"},...}
const workBook = utils.book_new();
utils.book_append_sheet(workBook, workSheet);
// writeFile 方法只能在 node 環(huán)境下使用。
writeFile(workBook, "個人信息文件.xlsx", {
Props: { // 作者的相關信息
title: "個人信息明細",
creator: window.User,
}
})
}
worksheet['!cols']:存儲列對象的數(shù)組,可以在這里設置列寬。
//wpx 字段表示以像素為單位,wch 字段表示以字符為單位
worksheet['!cols'] = [
{ wpx: 200 }, //設置第1列列寬為200像素
{ wch: 50 }, //設置第2列列寬為50字符
];
單元格對象中的屬性
//設置A1單元格的值是序號,類型是字符串,字體顏色是FF0187FA
worksheet["A1"] = {
v: "序號",
t: "s",
s: {
font: {
color: { rgb: "FF0187FA" }
},
}
}
總結
其實js-export-excel是在xlsx的基礎上二次封裝的,以上是個人工作中對于第三方插件使用的一個小記錄,有寫錯的地方還請不吝賜教
2024/1/22更新
使用xlsx轉為二維數(shù)組的時候,可能導致數(shù)據(jù)和表頭對應不上的問題(23行)
// 應該根據(jù)表頭headerMap重新組裝每一行的對象
const dataArr = _dataTable.map(item =>
Object.keys(headerMap)
.map(key => item[key])
)
到此這篇關于React使用xlsx和js-export-excel實現(xiàn)前端導出的文章就介紹到這了,更多相關React前端導出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React掌握openapi-typescript-codegen快速生成API客戶端代碼的過程
openapi-typescript-codegen是一個開源工具,用于根據(jù)OpenAPI規(guī)范自動生成TypeScript代碼,包括類型定義和API客戶端代碼,它幫助開發(fā)者節(jié)省手動編寫代碼的時間,提高開發(fā)效率,感興趣的朋友一起看看吧2024-11-11
ReactNative頁面跳轉Navigator實現(xiàn)的示例代碼
本篇文章主要介紹了ReactNative頁面跳轉Navigator實現(xiàn)的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08
解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題
這篇文章主要介紹了解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03

