ajax获得excel文件流在前端打开_教程36——导出 Excel（项目）

导出 Excel，是后端来做的。

  toExcel = () => {
    
    ///在实际项目中，实际上这个功能是前端发送一个 ajax 请求到后端，然后后端返回一个文件下载的地址。
  }

安装

npm i xlsx -S

index.js：

import React, {
     Component } from 'react'
import moment from 'moment'
import XLSX from 'xlsx'
import {
    
    Card,
    Button,
    Table,
    Tag,
} from 'antd'; 
import {
     getArticles } from '../../requests'

const ButtonGroup = Button.Group

const titleDisplayMap={
    
  id:'id',
  title:'标题',
  author:'作者',
  createAt:'创建时间',
  amount:'阅读量'
}
export default class ArticleList extends Component {
    
  constructor(){
    
    super()
    this.state={
    
      dataSource: [
        //初始化的数据暂时不用了
      ],
      total:0,
      isLoading:false,
      //默认从多少开始
      offset:0,
      limited:10
    }
  }
  createColumns = (columnKeys) => {
    
    const columns = columnKeys.map(item => {
    
      if (item === 'amount') {
    
        return {
    
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
    
            const {
     amount } = record
            // 这里是根据一个数字的大小做一个条件渲染
            // 同理，可以做职位级别不同的颜色
            // 总经理：'001'，经理：'002'，主管: '003' 
            // const titleMap = {
    
            //   '001': 'red',
            //   '002': '#09f',
            //   '003': 'green'
            // }
            // return <Tag color={
    titleMap[titleKey]}>{
    record.title}</Tag>
            return <Tag color={
    amount > 230 ? 'red' : 'green'}>{
    record.amount}</Tag>
          }
        }
      }
      if(item === 'createAt'){
    
        return {
    
          title: titleDisplayMap[item],
          key: item,
          render: (text, record) => {
    
            const {
     createAt } = record
            return moment(createAt).format('YYYY年MM月DD日 hh:mm:ss')
          }
        }
      }
      return {
    
        title:titleDisplayMap[item],
        dataIndex:item,
        key:item
      }
    })
    columns.push({
    
      title:'操作',
      key:'action',
      render:() => {
    
        return (
          <ButtonGroup>
            <Button size="small" type="primary">编辑</Button>
            <Button size="small" type="danger">删除</Button>
          </ButtonGroup>
        )
      }
    })
    return columns
  }
  getData = () => {
    
    this.setState({
    
      isLoading:true
    })
    getArticles(this.state.offset, this.state.limited)
    .then(resp => {
    
      const columnKeys=Object.keys(resp.list[0])
      const columns=this.createColumns(columnKeys)
      this.setState ({
    
        total:resp.total,
        dataSource:resp.list,
        columns,
      })
    })
    .catch(ree => {
    
      //，处理错误，虽然有全局处理
    })
    .finally(() => {
    
      this.setState({
    
        isLoading:false
      })
    })
  }

//分页
  onPageChange = (page, pageSize) => {
    
    console.log({
    page, pageSize})
    this.setState({
    
      offset:pageSize * (page - 1),
      limited:pageSize
    },() => {
    
      this.getData()
    })
  }

  onShowSizeChange = (current,size) => {
    
    //这里要注意和产品聊好需求，回到第一页还是留在当前页
    console.log({
    current,size})
    this.setState({
    
      offset:0,
      limited:size
    },() => {
    
      this.getData()
    })
  }

  toExcel = () => {
    

    ///在实际项目中，实际上这个功能是前端发送一个ajax请求到后端