Prtable表格中根據搜索條件實現(xiàn)excel表格導出。

代碼展示：

index.jsx

import React, { useRef, useState, Fragment, useEffect } from 'react';
import { getLecturerList, lecturerExportExcel } from '@/services/train/personnel';
import { getOrgList, getSelectType } from '@/services/globalServices';
import { PlusOutlined, EditTwoTone, ExportOutlined } from '@ant-design/icons';
import { PageContainer, ProTable, ProFormSelect } from '@ant-design/pro-components';
import { Button, message, Form, Space, Tooltip, Spin } from 'antd';
import { FormattedMessage } from 'umi';

const InsideLecturer = () => {
  const [orgList, setOrgList] = useState([]); // 管理機構
  const [downloadParams, setDownloadParams] = useState({}); //導出參數
  const [downloadTotal, setDownloadTotal] = useState({}); //導出數量總數以及頁碼
  const [exportExcelLoading, setExportExcelLoading] = useState(false); //導出loading
  const actionRef = useRef(); // 表格組件ProTable ref
  const [form] = Form.useForm(); // 創(chuàng)建表單
  const formRef = useRef();
  const [currentRow, setCurrentRow] = useState(); // 當前行數據
  const [teacherstateArray, setTeacherstateArray] = useState([]); // 在崗狀態(tài)
  const [teacherstateObj, setTeacherstateObj] = useState({}); // 在崗狀態(tài)
  const [teacherTypeArray, setTeacherTypeArray] = useState([]); // 講師類型
  const [teacherTypeObj, setTeacherTypeObj] = useState({}); // 講師類型
  const [idtypeArray, setIdtypeArray] = useState([]); // 證件類型

  const teacherType = 2; // 內勤講師類型
  useEffect(() => {
    getSelectTypeFun();
  }, []);
  const getSelectTypeFun = async () => {
    await getSelectType('teacherstate').then((res) => {
      if (res && res.data) {
        setTeacherstateArray(res.data);
        let Obj = {};
        res.data.forEach((item) => {
          Obj[item.code] = item.codeName;
        });
        setTeacherstateObj(Obj);
      }
    });
    await getSelectType('teachertype').then((res) => {
      if (res && res.data && res.data.length > 0) {
        let removedArr = res.data.filter((item) => {
          return item.code != '1' && item.code != '3';
        });
        setTeacherTypeArray(removedArr);
        let Obj = {};
        removedArr.forEach((item) => {
          Obj[item.code] = item.codeName;
        });
        setTeacherTypeObj(Obj);
      }
    });
    await getSelectType('idnotype').then((res) => {
      if (res && res.data) {
        setIdtypeArray(res.data);
      }
    });
  };
  const fieldNames = {
    label: 'codeName',
    value: 'code',
  };
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '講師類別',
      dataIndex: 'teacherType',
      valueType: 'select',
      fieldProps: {
        options: teacherTypeArray,
        fieldNames,
      },
    },
    {
      title: '證件號碼',
      dataIndex: 'idNo',
    },
    {
      title: '工號',
      dataIndex: 'staffCode',
      search: false,
      editable: false,
    },
    {
      title: '講師狀態(tài)',
      dataIndex: 'state',
      valueType: 'select',
      fieldProps: {
        options: teacherstateArray,
        fieldNames,
      },
    },
    {
      title: '移動電話',
      dataIndex: 'mobile',
      search: false,
      width: 150,
    },

    {
      title: <FormattedMessage id="pages.searchTable.titleOption" />,
      dataIndex: 'option',
      valueType: 'option',
      width: 100,
      render: (_, record) => [
        <div key={record.staffCode}>
          <Fragment>
            <a
              onClick={() => {
                setCurrentRow(record);
              }}
            >
              <EditTwoTone />
              <FormattedMessage id="pages.searchTable.edit" />
            </a>
            <span style={{ marginRight: '10px' }}></span>
          </Fragment>
        </div>,
      ],
    },
  ];

  return (
    <Spin spinning={exportExcelLoading} tip="數據導出中...">
      <PageContainer breadcrumb={false}>
        <ProTable
          headerTitle="查詢列表"
          rowKey={'staffCode'}
          actionRef={actionRef}
          options={false}
          formRef={formRef}
          search={{
            labelWidth: 120,
          }}
          params={{
            teacherType: 2,
          }}
          pagination={{
            pageSize: 10,
          }}
          tableAlertOptionRender={() => {
            return false;
          }}
          toolBarRender={() => [
            <Tooltip placement="topLeft" title="點擊導出內容">
              <Button
                type="default"
                key="export"
                loading={exportExcelLoading}
                onClick={() => {
                  lecturerExportExcel({
                    downloadTotal,
                    downloadParams,  //  ...formRef.current?.getFieldsValue(), 
                    orgObj2,
                    teacherstateObj,
                    teacherType,
                    teacherTypeObj,
                    setExportExcelLoading,
                  });
                }}
              >
                <ExportOutlined /> 導出數據
              </Button>
            </Tooltip>,
          ]}
          revalidateOnFocus={false}
          onSubmit={(params) => {
            // 導出參數設置
            setDownloadParams(params);
          }}
          onReset={() => setDownloadParams(undefined)}
          request={(params) => {
            const res = getLecturerList({ ...params });
            res.then((value) => {
              // 設置導出總數以及頁碼
              setDownloadTotal({
                current: 1,
                pageSize: value?.total || 100000,
              });
            });
            return res;
          }}
          columns={columns}
        />
      </PageContainer>
    </Spin>
  );
};

export default InsideLecturer;

數據字典格式返回：

以 teacherTypeObj 為例 向services.js中 lecturerExportExcel 方法中傳入的格式為：

services.js中 lecturerExportExcel 導出方法：

import { request } from 'umi';
import { paramsFilter } from '../../utils/utils';
import ExportJsonExcel from 'js-export-excel';
import { message } from 'antd';


export async function lecturerExportExcel(params) {
  const { downloadTotal, downloadParams, orgObj2, teacherstateObj, teacherType, teacherTypeObj, setExportExcelLoading } = params;
  setExportExcelLoading(true);
  // 參數合并
  let newParams = Object.assign(downloadTotal, downloadParams);
  newParams.teacherType = teacherType;
  const result = await request('/api/Info/list2', {
    params: paramsFilter(newParams),
  });
  // 根據實際情況注釋不需要導出的字段
  const allowExportColumns = [
    'manageCom',
    'name',
    'staffCode',
    'idNo',
    'mobile',
    "state",
    "teacherType"
  ];
  const TableItemObject = {
    manageCom: "管理機構",
    name: "姓名",
    staffCode: "工號",
    idNo: "證件號碼",
    mobile: "移動電話",
    state: "講師狀態(tài)",
    teacherType: '講師類別'
  };

  const cnColumns = allowExportColumns.map(kk => TableItemObject[kk]);
  if (Array.isArray(result?.data) && result?.data.length > 0) {
    const tableData = [];
    result?.data.forEach((item) => {
      const kv = {};
      Object.keys(item).map(vv => {
        if (allowExportColumns.includes(vv)) {
          // 數據字典字段漢化
          if (vv === 'manageCom') {
            kv[TableItemObject[vv]] = orgObj2[item[vv]] || '';
          } else if (vv === 'state') {
            kv[TableItemObject[vv]] = teacherstateObj[item[vv]] || '';
          } else if (vv === 'teacherType') {
            kv[TableItemObject[vv]] = teacherTypeObj[item[vv]] || '';
          } else {
            // 不用漢化直接輸出
            kv[TableItemObject[vv]] = item[vv];
          }
        }
      })
      tableData.push(kv);
    });
    const option = {
      fileName: "講師信息",
      datas: [
        {
          sheetData: tableData,// 數據
          sheetName: 'sheet1',
          sheetFilter: cnColumns,// 表頭
          sheetHeader: cnColumns,// 表頭
        }
      ]
    }
    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
    setExportExcelLoading(false);
    return true;
  }
  message.error('數據為空！');
  setExportExcelLoading(false);
  return false;
}

utils 中 paramsFilter 方法：過濾無用參數文章來源地址http://www.zghlxwxcb.cn/news/detail-701167.html

// 接口請求參數中 刪除對象中值為空或null或undefined或者為空的所有屬性
export function paramsFilter(requestParams) {
  let newParams = Object.keys(requestParams)
    .filter((key) => requestParams[key] !== null && requestParams[key] !== undefined && requestParams[key] !== '')
    .reduce((acc, key) => ({ ...acc, [key]: requestParams[key] }), {});
  return newParams;
}

到了這里，關于Ant-Design-Pro-V5： ProTable前端導出excel表格。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！