表格文件的导入和导出（vue和react都可以用）

可以用）"/>

表格文件的导入和导出（vue和react都可以用）

 一、表格文件的导入

需要安装antd、xlsx。

步骤一 ：创建一个input框，将其type类型定义为file。另外使用Button组件（引自antd），使用useRef获取input元素的实例，并使其可以点击触发input。与此同时，需要将input隐藏，让Button代为执行input功能。

步骤二：创建一个文件读取器 ，使其可以获取文件的具体信息。

import { Button, Table } from 'antd'
import React,{useRef,useState} from 'react'
import * as XLSX from 'xlsx'const Import = () => {const inpRef = useRef()const [pro,setPro] = useState()function importClick(e){// 创建一个文件读取器const reader = new FileReader()// 将文件读取成数据流reader.readAsBinaryString(e.target.files[0])// 读取成功之后的回调函数reader.onload = ()=>{// 将文件数据流转换成 js 对象const box = XLSX.read(reader.result,{type: 'binary'})// 将 工作表1 中的内容读取出来let res = box.Sheets['工作表1']// 将表内容转换成 json 数据res = XLSX.utils.sheet_to_json(res)// console.log(res);setPro(res)
}}const columns = [{title: '序号',render(t,r,i){return <span>{i + 1}</span>}}, {title: '商品名称',dataIndex: 'proname'} ]return (<div><h1>文件导入</h1><Button onClick={()=>{inpRef.current.click()}}>文件导入</Button><input ref={inpRef} type="file" hidden onChange={e => {importClick(e)}} /><Table dataSource={pro} rowKey={'proid'} scroll={{y: 450}} columns={columns} /></div>)}export default Import

 二、表格文件的导出

需要组件库：antd和js-export-excel

import React, { useEffect, useState } from 'react'
import {getProList} from '../../api/pro'
import {Table, Button} from 'antd'
import ExportJsonExcel from 'js-export-excel'const Export = () => {// 所有的数据const [proList,setProList] = useState()useEffect(()=>{getProList().then(res => {// console.log(res.data);setProList(res.data)})}, [])const columns = [{title: '序号',render(t,r,i){return <span>{i + 1}</span>}}, {title: '商品名称',dataIndex: 'proname'}]function exportClick(){const option = {fileName: '商品信息', // 导出的文件名称datas: [{sheetData: proList, // 要导出的原数据sheetName: '你好世界', // 导出后工作表的名称sheetFilter: ['proname', 'proid', 'brand', 'category'], // 需要导出原数据中的哪些字段sheetHeader: ['商品名称', '商品 id', '品牌', '分类'], // 导出文件后，表头名称columnWidths: [], // 导出后单元格的宽度}, {sheetData: proList, // 要导出的原数据sheetName: '你好中国', // 导出后工作表的名称sheetFilter: ['img1','originprice', 'desc'], // 需要导出原数据中的哪些字段sheetHeader: ['商品logo', '商品价格', '介绍'], // 导出文件后，表头名称columnWidths: [10,20,30], // 导出后单元格的宽度}]}// 将配置对象，配置成 excel 表格文件const toExcel = new ExportJsonExcel(option)// 将表格文件保存在本地toExcel.saveExcel()}return (<div><h1>文件导出 <Button onClick={exportClick}>导出</Button></h1><Table dataSource={proList} rowKey={'proid'} scroll={{y: 450}} columns={columns} /></div>)
}
export default Export