1 安装依赖
npm install xlsx
2 demo
'use client';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import './styles.css';
const PreInvestigation: React.FC = () => {
const [data, setData] = useState<unknown[]>([]);
const handleFileUpload = (event: any) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
console.log('File loaded');
const arrayBuffer = e.target?.result;
console.log('ArrayBuffer:', arrayBuffer);
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
console.log('Workbook:', workbook);
const firstSheetName = workbook.SheetNames[0];
console.log('First Sheet Name:', firstSheetName);
const worksheet = workbook.Sheets[firstSheetName];
console.log('Worksheet:', worksheet);
const jsonData = XLSX.utils.sheet_to_json(worksheet);
console.log('JSON Data:', jsonData);
setData(jsonData);
};
reader.readAsArrayBuffer(file);
};
return (
<>
<div style={{ marginTop: 100 }}>
<input type="file" onChange={handleFileUpload} accept=".xlsx, .xls" />
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</>
);
};
export default PreInvestigation;
3 效果展示
2.png
3.png
