React前端解析excel文件,获取excel文件中的数据

最新推荐文章于 2024-08-19 17:04:41 发布

zhongshizhi91

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量895

点赞数 10

文章标签：前端 react.js excel

本文链接：https://blog.csdn.net/shuxiaoxii/article/details/135747875

版权

本文介绍了如何在React应用中使用XLSX库处理上传的Excel文件，包括将File转换为JSON格式，以及从URL下载并解析Excel文件。函数`analyseExcelToJson`用于转换Excel内容，而`getFileFromUrl`则用于从指定URL获取Excel文件。

摘要由CSDN通过智能技术生成

核心

xlsx

import React, { useEffect } from 'react';
import { Upload, Input } from 'antd';
import XLSX from 'xlsx';

/**
 * 将 file 转为一个 CSF 的 JSON
 * @param {File} file
 * @returns sheet
 */
const analyseExcelToJson = (file) => {
	return new Promise((resolve, reject) => {
		if (file instanceof File) {
			const reader = new FileReader();
			reader.onloadend = (progressEvent) => {
				const arrayBuffer = reader.result;
				const options = { type: 'array' };
				const workbook = XLSX.read(arrayBuffer, options);
				const sheetName = workbook.SheetNames;
				const sheet = workbook.Sheets[sheetName];
				resolve(sheet);
			};
			reader.readAsArrayBuffer(file);
		} else {
			reject(new Error('入参不是 File 类型'));
		}
	});
};

function getFileFromUrl(url, fileName) {
  return new Promise((resolve, reject) => {
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.setRequestHeader('Accept', 'image/png');
    xhr.responseType = "blob";
    // 加载时处理
    xhr.onload = () => {
      // 获取返回结果
      blob = xhr.response;
      let file= new File([blob], fileName, { type: 'image/png' });
      // 返回结果
      resolve(file);
    };
    xhr.onerror = (e) => {
      reject(e)
    };
    // 发送
    xhr.send();
  });
}


export default function GetExcelInfo(props) {
	const fileChange = (info) => {
		console.log(info);
    analyseExcelToJson(info.file).then((res) => {
      console.log(res);
    });
	};

	const beforeUpload = (file) => {
	  console.log(file)
    analyseExcelToJson(file);
    return false;
  };

	useEffect(() => {
    getFileFromUrl('http://xxxxxxx.com/asdasd.xlsx', '导出文件.xlsx').then((file) => {
      analyseExcelToJson(file).then((res) => {
        console.log(res);
        return res;
      });
    });
  }, []);

	return (
		<div>

		</div>
	);
}