excel的导入和导出

122 阅读1分钟

对于后台管理系统,数据除了正常录入,还有是通过excel的导入导出

excel的导入导出需要使用到的插件xlsx和js-export-excel

导入excel(核心代码)

XLSX.read(result,{type:'binary})其中type的参数如下

参数解释
base64以base64方式读取
binaryBinaryString格式(byte n is data.charCodeAt(n))
stringUTF8编码的字符串
buffernodejs Buffer
arrayUint8Array,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>
    )
}