fe_service_ebtp_frontend/src/utils/PdfModal/PdfModal.tsx

import React, { useEffect, useState } from 'react';
import { Modal, Button } from 'antd';
import PDF from 'react-pdf-js';
import ProCard from '@ant-design/pro-card';
import FileDown from '@/utils/Download';
import { checkFileExist } from './service';
/**
 * Pdf Modal弹窗公共组件
 * 2021.8.25 zhoujianlong 根据定标结果通知书的弹出窗口改造初始版本，增加备注
 */
interface PdfModalProps {
  fileId: string; //文档中心id
  downLoadFileName: string; //下载后的文件名称
  modalVisible: boolean; //Modal 弹出还是关闭
  onCancel: () => void; //关闭Modal方法
}

const PdfModal: React.FC<PdfModalProps> = (props) => {
  const { fileId, downLoadFileName, modalVisible, onCancel } = props;
  const [page, setPage] = useState<number>(1); //页码
  const [pages, setPages] = useState<number>(0); //总页数
  const [fileExist, setFileExist] = useState<string>('0'); //0：未验证，1：验证后有，2：验证后没有

  useEffect(() => {
    //判断文件是否存在
    checkFileExist(fileId).then((res) => {
      if (res !== undefined && res.length > 0) {
        setFileExist('1');
      } else {
        setFileExist('2');
      }
    });
  }, [fileId]);

  //文档总页码
  const onDocumentComplete = (pages: any) => {
    setPage(1);
    setPages(pages);
  };

  //上一页
  const handlePrevious = () => {
    setPage(page - 1);
  };

  //下一页
  const handleNext = () => {
    setPage(page + 1);
  };

  //下载链接
  const downLoadFile = (fileId: string) => {
    const returnUrl = '/api/core-service-ebtp-updownload/v1/attachment/download/bid/' + fileId;
    return returnUrl;
  };

  const modalHeight = (window.innerHeight * 96) / 100;

  return (
    <Modal
      destroyOnClose
      visible={modalVisible}
      title="预览"
      onCancel={() => onCancel()}
      width={'80%'}
      centered
      style={{ maxHeight: modalHeight }}
      bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
      footer={[
        <>
          <Button key="close" onClick={() => onCancel()}>
            关闭
          </Button>
          {fileExist == '1' ? (
            <>
              <Button disabled={page === pages} key="nextBtn" onClick={() => handleNext()}>
                {' '}
                下一页
              </Button>
              <Button disabled={page === 1} key="preBtn" onClick={() => handlePrevious()}>
                {' '}
                上一页
              </Button>
              <FileDown
                key="downLoadFile"
                type="pdf"
                apiUrl={downLoadFile(fileId)}
                style={{ float: 'left' }}
                fileName={downLoadFileName}
                btnName="下载"
                method="GET"
                form={null}
              />
            </>
          ) : null}
        </>,
      ]}
    >
      <ProCard layout="center" direction="column" ghost>
        {fileExist == '0' ? (
          <div />
        ) : fileExist == '1' ? (
          <>
            <PDF
              file={downLoadFile(fileId)}
              scale={1.6}
              onDocumentComplete={onDocumentComplete}
              page={page}
            />
          </>
        ) : (
          <span>对不起，您所查看的文件不存在，请与系统管理员联系！</span>
        )}
      </ProCard>
    </Modal>
  );
};

export default PdfModal;