React實現導出excel文件的操作步驟
更新時間：2024年12月19日 09:36:30 作者：今天也要暴富
在React項目的TypeScript文件中,因為原生的JavaScript或TypeScript并沒有提供直接的Excel導出功能,常用的Excel導出方法通常涉及使用第三方庫,本文介紹了React實現導出excel文件的操作步驟,需要的朋友可以參考下
在 React 項目中實現點擊按鈕后導出數據為 Excel 文件，可以使用 xlsx 和 file-saver 這兩個庫。
一、安裝依賴
在項目中安裝必要的庫：
npm install xlsx file-saver
- xlsx：用于生成 Excel 文件。
- file-saver：用于觸發(fā)文件下載。
二、實現導出功能
import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import { saveAs } from 'file-saver'; // 用于保存文件
const ExportExcel = () => {
const handleExport = () => {
// 示例數據
const data = [
{ Name: 'John Doe', Age: 28, City: 'New York' },
{ Name: 'Jane Smith', Age: 34, City: 'San Francisco' },
{ Name: 'Sam Green', Age: 45, City: 'Chicago' },
];
// 將數據轉換為工作表
const worksheet = XLSX.utils.json_to_sheet(data);
// 創(chuàng)建一個新的工作簿
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 導出為 Blob
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
// 使用 FileSaver 保存文件
saveAs(blob, 'example.xlsx');
};
return (
<div>
<button onClick={handleExport}>導出 Excel</button>
</div>
);
};
export default ExportExcel;
三、自定義列標題
在使用 xlsx 時，如果需要自定義列標題，可以通過手動創(chuàng)建數據表頭，然后將其與數據合并為新的數組，最后生成工作表。
import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import { saveAs } from 'file-saver'; // 用于保存文件
const ExportExcelWithHeaders = () => {
const handleExport = () => {
// 示例數據
const data = [
{ name: 'John Doe', age: 28, city: 'New York' },
{ name: 'Jane Smith', age: 34, city: 'San Francisco' },
{ name: 'Sam Green', age: 45, city: 'Chicago' },
];
// 自定義列標題
const headers = ['Name', 'Age', 'City'];
// 數據按自定義順序排序
const formattedData = data.map((item) => [item.name, item.age, item.city]);
// 將列標題與數據合并
const worksheetData = [headers, ...formattedData];
// 創(chuàng)建工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
// 創(chuàng)建工作簿并添加工作表
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 導出為 Blob
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
// 使用 FileSaver 保存文件
saveAs(blob, 'example_with_headers.xlsx');
};
return (
<div>
<button onClick={handleExport}>導出帶自定義標題的 Excel</button>
</div>
);
};
export default ExportExcelWithHeaders;
四、設置列寬度
在 xlsx 中，可以通過設置工作表的 !cols 屬性來自定義每一列的寬度。
import React from 'react';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
const ExportExcelWithColumnWidths = () => {
... ...
// 創(chuàng)建工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
// 設置列寬
worksheet['!cols'] = [
{ wch: 15 }, // 第一列寬度：15字符
{ wch: 5 }, // 第二列寬度：5字符
{ wch: 20 }, // 第三列寬度：20字符
];
// 創(chuàng)建工作簿并添加工作表
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
... ...
};
... ...
};
export default ExportExcelWithColumnWidths;
- 列寬與內容長度匹配： 如果列內容長度可能變化，可以動態(tài)計算 wch：
const columnWidths = [
{ wch: Math.max(...data.map(item => item.name.length), 10) }, // 動態(tài)計算第一列寬度
{ wch: 5 },
{ wch: Math.max(...data.map(item => item.city.length), 15) },
];
worksheet['!cols'] = columnWidths;
- 注意事項
1.如果未設置 !cols，默認列寬會很窄，可能導致數據被截斷。
2.wch 值可以設置為整數或浮點數，決定寬度的字符數。
3.列寬不會強制影響單元格內容換行。若希望內容換行，需要在單元格內容中加入換行符 \n 并配合樣式（需借助 xlsx-style 或其他擴展庫）。
五、樣式優(yōu)化
在 xlsx 中，默認的導出樣式較為基礎。如果需要對 Excel 文件進行樣式優(yōu)化（如字體、顏色、邊框、對齊方式等），可以通過擴展庫 xlsx-style 或 sheetjs-style 實現。
1、安裝擴展庫
這是一種擴展版的 xlsx，可以在導出的 Excel 中應用樣式
npm install sheetjs-style
2、設置樣式
import React from 'react';
import * as XLSX from 'sheetjs-style'; // 替代 xlsx 庫
import { saveAs } from 'file-saver'; // 用于保存文件
const ExportExcelWithStyles = () => {
const handleExport = () => {
// 示例數據
const data = [
{ name: 'John Doe', age: 28, city: 'New York' },
{ name: 'Jane Smith', age: 34, city: 'San Francisco' },
{ name: 'Sam Green', age: 45, city: 'Chicago' },
];
// 自定義列標題
const headers = ['Name', 'Age', 'City'];
// 格式化數據
const formattedData = data.map((item) => [item.name, item.age, item.city]);
// 將標題與數據合并
const worksheetData = [headers, ...formattedData];
// 創(chuàng)建工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
// 設置樣式
const headerStyle = {
font: { bold: true, color: { rgb: 'FFFFFF' } }, // 粗體，白色字體
fill: { fgColor: { rgb: '4F81BD' } }, // 藍色背景
alignment: { horizontal: 'center', vertical: 'center' }, // 居中對齊
};
const bodyStyle = {
font: { color: { rgb: '000000' } }, // 黑色字體
alignment: { horizontal: 'left', vertical: 'center' }, // 左對齊
border: {
top: { style: 'thin', color: { rgb: 'CCCCCC' } },
bottom: { style: 'thin', color: { rgb: 'CCCCCC' } },
left: { style: 'thin', color: { rgb: 'CCCCCC' } },
right: { style: 'thin', color: { rgb: 'CCCCCC' } },
},
};
// 使用 XLSX.utils.encode_cell 獲取單元格的地址,應用樣式到標題行
headers.forEach((_, colIndex) => {
const cellAddress = XLSX.utils.encode_cell({ r: 0, c: colIndex });
//設置單元格樣式
worksheet[cellAddress].s = headerStyle;
});
// 應用樣式到數據行
formattedData.forEach((row, rowIndex) => {
row.forEach((_, colIndex) => {
const cellAddress = XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex });
if (worksheet[cellAddress]) {
worksheet[cellAddress].s = bodyStyle;
}
});
});
// 設置列寬
worksheet['!cols'] = [
{ wch: 15 }, // 第一列寬度：15字符
{ wch: 5 }, // 第二列寬度：5字符
{ wch: 20 }, // 第三列寬度：20字符
];
// 創(chuàng)建工作簿并添加工作表
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Styled Sheet');
// 導出為 Blob
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
// 使用 FileSaver 保存文件
saveAs(blob, 'styled_example.xlsx');
};
return (
<div>
<button onClick={handleExport}>導出帶樣式的 Excel</button>
</div>
);
};
export default ExportExcelWithStyles;
效果：
3、擴展樣式功能
- 單元格合并： 使用 worksheet[‘!merges’] 屬性：
worksheet['!merges'] = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, // 合并第1行，第1~第3列
];
語法結構：
worksheet['!merges'] = [
{ s: { r: 起始行, c: 起始列 }, e: { r: 結束行, c: 結束列 } },
];
s：表示合并范圍的 起始單元格，包含兩個屬性：
r：行號，從 0 開始（例如，第 1 行為 0）。c：列號，從 0 開始（例如，A 列為 0，B 列為 1）。
e：表示合并范圍的 結束單元格，包含同樣的 r 和 c 屬性。
- 動態(tài)樣式： 根據數據動態(tài)調整單元格樣式，例如：
if (row.age > 30) {
worksheet[cellAddress].s = { fill: { fgColor: { rgb: 'FFC7CE' } } }; // 背景變紅
}
- 自動篩選： 設置自動篩選功能（表頭下的篩選按鈕）：
worksheet['!autofilter'] = { ref: 'A1:C1' }; // 設置 A1:C1 的自動篩選
到此這篇關于React實現導出excel文件的操作步驟的文章就介紹到這了,更多相關React導出excel文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React 進入頁面后自動 focus 到某個輸入框的解決方案
React.js 當中提供了 ref 屬性來幫助我們獲取已經掛載的元素的 DOM 節(jié)點,你可以給某個 JSX 元素加上 ref屬性,這篇文章主要介紹了React 進入頁面以后自動 focus 到某個輸入框,需要的朋友可以參考下2024-02-02
react-redux的connect與React.forwardRef結合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
react echarts tooltip 區(qū)域新加輸入框編輯保存數據功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數據功能,大概思路是用一個div包裹echarts, 然后在echarts的同級新建一個div用來用來模擬真實tooltip，通過鼠標移入移出事件控制真實tooltip的顯示與隱藏，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了在react項目中webpack使用mock數據的操作方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
React?提供了許多常用的?Hooks，用于在函數組件中添加狀態(tài)管理、副作用處理和其他功能，本文主要介紹了其中幾個常用的，需要的可以收藏一下2023-07-07
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復用性極高,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
本文主要介紹了React+Ts實現二次封裝組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
React中useCallback useMemo到底該怎么用
在React函數組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2023-02-02
這篇文章主要介紹了ReactNative-JS 調用原生方法實例代碼的相關資料,需要的朋友可以參考下2016-10-10
react-i18next 是基于 i18next 的一款強大的國際化框架，可以用于 react 和 react-native 應用，是目前非常主流的國際化解決方案。這篇文章主要介紹了React國際化react-i18next的相關知識,需要的朋友可以參考下2021-10-10