前言:在对于刚刚入行的前端小伙伴们,对于项目功能我相信肯定有一种心态,后台能处理的数据就都有后台来处理,前端不做任何处理最好,哈哈, 1.前端处理的数据不能持久化,就算是数据持久化也都是依赖h5的新特性,做本地存贮一个是存在浏览器缓存上面(Session),一种则是通过浏览器存在电脑的硬盘上面(Local),这对前端处理数据大大的有点难度 2.依赖了接口这样每次调用接口来处理这个数据,感觉方便了很多,但是后端又不愿意了,哈哈 ——> 哔哔一大堆, 废话不多说上代码
//下载依赖
yarn add xlsx
下载好了依赖的插件后,到咱们开始写代码的时候,
import { Button, Upload} from 'antd'; // 不知道这是干啥的就去 antDesign UI官网上面查看一下这个玩意是啥哈
import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
<Upload
fileList={[]}
accept=".xlsx, .xls" // 我这个只是上传了这么解析 xlsx的表格的,如果是要解析pdf doc的那您就自求多福吧
beforeUpload={(file, list) => uploadBeforeUpload(file, list)}
>
<Button
style={{ marginTop: 15, marginBottom: 15 }}
icon={<UploadOutlined />}
>
上传表格
</Button>
</Upload>
咱们上一步已经把上传的按钮功能写了,但是上传处理的方法还没有写,哈哈哈
const uploadBeforeUpload = (file) => {
const fileReader = new FileReader();
// 以二进制方式打开文件
fileReader.readAsBinaryString(file);
fileReader.onload = (event) => {
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);
};
};
这里的data就是你要处理的解析出来的JSON了,不过有一点你要注意,因为你要解析的表格头部的列是中文的,你可能得转一下,或者在表格写的时候按照中文的来渲染数据 👇
const columns = [
{
title: '分配给司机的数量',
dataIndex: '分配给司机的数量',
ellipsis: true,
hideInSearch: true,
align: 'center',
},
];
<Table
style={{ padding: '0 10px 10px 10px', backgroundColor: '#fff' }}
scroll={{ x: 4500 }}
dataSource={dataList} // 此处是data
columns={columns}
/>
上面渲染表格,我是以中文的表头来渲染的,有没有感觉很low,其实可以在刚取出来data的时候可以手动给他变成英文的名
说到最后希望这篇帖子能够帮助到你,代码可以抄但是更得理解,多敲才是王道希望你对代码有着真挚的感情,对自己敲出的代码都有不一样的自信,感谢您的浏览,愿你出走半生,归来仍是少年