对于后台管理系统,数据除了正常录入,还有是通过excel的导入导出
excel的导入导出需要使用到的插件xlsx和js-export-excel
导入excel(核心代码)
XLSX.read(result,{type:'binary})其中type的参数如下
参数 | 解释 |
---|---|
base64 | 以base64方式读取 |
binary | BinaryString格式(byte n is data.charCodeAt(n)) |
string | UTF8编码的字符串 |
buffer | nodejs Buffer |
array | Uint8Array,8位无符号数组 |
file | 文件的路径(仅nodejs下支持) |
import * as XLSX from 'xlsx'
<input type='file' onChange={(e: any) => {
let file = e.target.files[0]//获取第一个文件
let reader = new FileReader()
reader.readAsBinaryString(file)//读取这个文件
reader.onload = function (event: any) {
try {
let result = event.target.result
let xlsxdata = XLSX.read(result, { type: 'binary' })//读取xlsx
let col = XLSX.utils.sheet_to_json(xlsxdata.Sheets.Sheet1, { header: 1, defval: '', blankrows: true })//解析为数组
} catch (err) {
console.log('失败')
}
}
}} />
导出excel
import * as XLSX from "xlsx"
import React, { useState, useEffect } from "react"
import { Table, Button } from "antd";
export const Excel = () =>{
const ExportJsonExcel = require("js-export-excel");
const [dataTable,setDataTable] = useState([
{name:'one',number:'1',programme:'kao'},
{name:'one',number:'1',programme:'kao'},
{name:'one',number:'1',programme:'kao'},
{name:'one',number:'1',programme:'kao'}
])
const columns = [
{
title: "名称",
dataIndex: "name",
},
{
title: "编号",
dataIndex: "number",
},
{
title: "方案",
dataIndex: "programme",
}
]
const downloadFileToExcel = () => {
let option:any= {}; //option代表的就是excel文件
option.fileName = "demo表"; //excel文件名称
option.datas = [
{
sheetData: dataTable, //excel文件中的数据源
sheetName: "demo", //excel文件中sheet页名称
sheetFilter: ["name", "number", "programme"], //excel文件中需显示的列数据
sheetHeader:["名称", "编号", "方案"] //excel文件中每列的表头名称
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
return (
<div>
<Table columns={columns} dataSource={dataTable} />
<Button type="primary" onClick={downloadFileToExcel}>生成Excel</Button>
</div>
)
}