前端导入功能

// npm install xlsx 下载xlsx依赖，并引入

import * as XLSX from "xlsx";

/

const DocsPage = () => {

const handleImport = (file: any) => {

try {

const { files } = file.target;

const fileReader = new FileReader();

console.log("fileReader", fileReader);

fileReader.onload = (event: any) => {

console.log("event", event);

const { result } = event.target;

// 以二进制流方式读取得到整份excel表格对象

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

console.log(workbook, "workbook");

let data: any[] = []; // 存储获取到的数据

for (const sheet in workbook.Sheets) {

if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {

//这是关键的一步，hasOwnPropert要从Object的原型中调用

// 利用 sheet_to_json 方法将 excel 转成 json 数据

data = data.concat(

XLSX.utils.sheet_to_json(workbook.Sheets[sheet])

);

// break; // 如果只取第一张表，就取消注释这行

}

}

// 此处调用后端接口

console.log(data, "data");

};

fileReader.readAsBinaryString(files[0]);

} catch (e) {

console.log(e);

}

};

return (

<div>

<label

htmlFor="file"

style={{ position: "absolute", left: 0, top: 0, zIndex: 1 }}

>

<button>

<input

type="file"

id="file"

style={{

position: "absolute",

left: 0,

top: 0,

opacity: 0,

zIndex: 99,

}}

onChange={handleImport}

// accept=".xlsx, .xls"

/>

批量导入

</button>

</label>

</div>

);

};

export default DocsPage;