表格文件的导入和导出（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