Ant Design Pro 在 ProTable 中添加导出功能

代码

import React, {useRef} from "react";
import {request} from "@umijs/max";

const MyPage = () => {
  const formRef = useRef<ProFormInstance>(null!);

  return <PageContainer>
    <ProTable<TableListItem>
      formRef={formRef}
      toolBarRender={() => [
        <Button color="default" variant="outlined" onClick={async () => {
          const formValues = formRef.current?.getFieldsValue?.();
          const res = await request('/api/export', {
            method: 'GET',
            params: {
              ...formValues
            },
            responseType: 'blob',
          });
          const blob = new Blob([res])
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = `file_${Date.now()}.csv`; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }}>
          导出
        </Button>
      ]}
      
}

注意

request指定responseType为blob，否则会出现中文乱码。