當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react 怎么获取表格_react学习之js-xlsx导入和导出excel表格

發布時間：2025/3/12 编程问答 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 react 怎么获取表格_react学习之js-xlsx导入和导出excel表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前記：最近真的挺忙的，一件事接著一件，都忘了我的React項目，盡管這是一個沒寫概率沒寫離散的夜晚，我決定還是先做做我的React

好了，進入正題

項目需求，需要導入和導出表單，發現前端已經強大到無所不能(可惜我有點懶，學的并不勤快)

因此使用到js-xlsx，附上github地址:https://github.com/SheetJS/js-xlsx

導入表單

1.控制臺安裝

$ npm install xlsx

2.在js文件中引入

import XLSX from 'xlsx';

import ExcelUtil from '../../utils/excelUtil'; //注：excelUtil.js是我自定義的關于表單的操作模塊

3.函數聲明

function importExcel(file){

// 獲取上傳的文件對象

const { files } = file.target;

// 通過FileReader對象讀取文件

const fileReader = new FileReader();

fileReader.onload = event => {

try {

const { result } = event.target;

// 以二進制流方式讀取得到整份excel表格對象

const workbook = XLSX.read(result, { type: 'binary' });

let data = []; // 存儲獲取到的數據

// 遍歷每張工作表進行讀取(這里默認只讀取第一張表)

for (const sheet in workbook.Sheets) {

if (workbook.Sheets.hasOwnProperty(sheet)) {

// 利用 sheet_to_json 方法將 excel 轉成 json 數據

data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));

// break; // 如果只取第一張表，就取消注釋這行

}

console.log(data);

} catch (e) {

// 這里可以拋出文件類型錯誤不正確的相關提示

console.log('文件類型不正確');

return;

}

};

// 以二進制方式打開文件

fileReader.readAsBinaryString(files[0]);

}

4.使用

{ExcelUtil.importExcel(e)} }/>

5.結果

控制臺打印出結果：

導出表單

第一第二步同上

3.函數聲明

function exportExcel(headers, data, fileName = '請假記錄表.xlsx') {

const _headers = headers

.map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))

.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});

const _data = data

.map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))

// 對剛才的結果進行降維處理(二維數組變成一維數組)

.reduce((prev, next) => prev.concat(next))

// 轉換成 worksheet 需要的結構

.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

// 合并 headers 和 data

const output = Object.assign({}, _headers, _data);

// 獲取所有單元格的位置

const outputPos = Object.keys(output);

// 計算出范圍 ,["A1",..., "H2"]

const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;

// 構建 workbook 對象

const wb = {

SheetNames: ['mySheet'],

Sheets: {

mySheet: Object.assign(

{},

output,

{

'!ref': ref,

'!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],

};

// 導出 Excel

XLSX.writeFile(wb, fileName);

}

4.定義表頭和數據項

const initColumn = [{

title: '姓名',

dataIndex: 'name',

key: 'name',

className: 'text-monospace',

}, {

title: '年級',

dataIndex: 'grade',

key: 'grade',