React中Table数据导出文件

最新推荐文章于 2024-08-30 16:52:37 发布

KisJ

最新推荐文章于 2024-08-30 16:52:37 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/KisJLLLLLL/article/details/131458824

文章描述了一个React应用中导出表格数据到Excel的功能实现，包括从后端接口获取数据，支持全选和单选操作。使用了ProTable组件，通过监听选中项变化来触发导出，并通过Blob处理接口返回的数据以创建可下载的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在需求中，我们需要导出Table中的数据，并且可以全选和单选，这边导出的excel是通过后端返回给我的，接口仅作参考，可以做出适当改动

import { upLoadList } from '@/utils/utils'
export const upLoadList = async (eventId, selectedRowKeys) => {
  return request.post(`api/forms/items/${eventId.classId}/export`, {
    headers: {
      Accept:
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
      headers: { 'Content-Type': 'application/json' },
    },
    data: {
      filter_cond: {
        conditions: [
          {
            condition: { field: 'id', op: 'in', value: selectedRowKeys },
            nextop: 'and',
          },
        ],
      },
      perm_group_id: 'all',
    },
    responseType: 'blob',
    getResponse: true,
  })
}

//导出全选功能
  const [selectedRowKeysAll, setSelectedRowKeysAll] = useState([])
  const [selectedTableRowKeys, setSelectedTableRowKeys] = useState([])
  const rowSelectionTable = {
    type: 'checkbox',
    // columnTitle: ' ',
    selectedRowKeys: selectedTableRowKeys,
    // getCheckboxProps: record => ({ // 单行禁用
    //   disabled: record.status === 1
    // }),
    onChange: (keys, item) => {
      setSelectedTableRowKeys(keys)
      console.log(keys, item, 'keys')
    },
  }
  const onSelectAll = () => {
    console.log(selectedRowKeysAll, 'selectedRowKeysAll')
    setSelectedTableRowKeys(selectedRowKeysAll)
  }
  const upLoad = async () => {
    const res = await upLoadList(eventId, selectedTableRowKeys).then(
      (res) => {
        let filename = res.response.headers
          .get('content-disposition')

          .split(';')[1]
          .split('filename=')[1]
        if (filename.includes('%')) {
          try {
            filename = decodeURIComponent(filename)
          } catch (ex) {}
        }
        console.log(filename, 'contentDisposition')

        const url = window.URL.createObjectURL(
          // **这儿有一个坑 post请求 有写成 res.data  get 请求 直接是res**
          new Blob([res.data], {
            type: 'application/vnd.ms-excel',
          })
        )
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', filename)
        document.body.appendChild(link)
        link.click()
      }
      // console.log(res, 'res')
      // message.success('导出成功')
      // }
    )
    // .catch((error) => {
    //   message.error(error)
    // })
  }
//全选按钮函数
  const getAllKey = async () => {
    const res2 = await getListService(
      1,
      999,
      eventId,
      '',
      selectedProject.primary_key_field
    )
    if (res2?.ret === 0) {
      const selectAll = res2?.msg?.data.map((item) => {
        return item?.id
      })
      console.log(selectAll, 'new')
      setSelectedRowKeysAll(selectAll)
    }
  }
 
 <ProTable 
 rowSelection={rowSelectionTable}
rowKey="id"
/>
  //下面的导出和全选按钮也做出了相应的判断
 {selectedTableRowKeys.length > 0 ? (
            <Button
              key="upLoad"
              type="primary"
              onClick={() => {
                upLoad()
                // history.push('/projectlist/form')
              }}
              // icon={<PlusOutlined />}
              style={{ marginLeft: 8 }}
            >
              导出
            </Button>
          ) : (
            ''
          )}
          <Button
            key="selectAll"
            type="primary"
            style={{ marginLeft: 8 }}
            onClick={() => {
              onSelectAll()
              // history.push('/projectlist/form')
            }}
            // icon={<PlusOutlined />}
            // style={{ marginLeft: 'auto', marginRight: 8 }}
          >
            全选
          </Button>