zy-react-library/components/Pdf/index.js

import { useFullscreen } from "ahooks";
import { Button, message, Modal, Spin } from "antd";
import { useRef, useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";
import useDownloadFile from "../../hooks/useDownloadFile";
import { getFileUrl } from "../../utils";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";
import "./index.less";

/**
 * PDF查看组件
 */
function Pdf(props) {
  const {
    visible = false,
    onCancel,
    file,
    name,
    inline = false,
    style = {},
  } = props;

  const fileUrl = getFileUrl();
  const [numPages, setNumPages] = useState(0);
  const [pdfWidth, setPdfWidth] = useState(600);
  const [loading, setLoading] = useState(true);

  const fullscreenRef = useRef(null);

  const [isFullscreen, { enterFullscreen, exitFullscreen }] = useFullscreen(fullscreenRef);
  const { downloadFile } = useDownloadFile();

  pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
    setLoading(false);
  };

  const onDocumentLoadError = () => {
    setLoading(false);
    message.error("加载 PDF 文件失败");
    if (onCancel)
      onCancel();
  };

  const onPageLoadSuccess = ({ width }) => {
    setPdfWidth(width);
  };

  // 内联模式的PDF内容
  const renderPdfContent = () => (
    <>
      {loading && (
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "72vh" }}>
          <Spin size="large" />
        </div>
      )}
      <div style={{ height: isFullscreen ? "calc(100vh - 40px - 24px - 8px - 32px - 12px)" : "72vh", overflowY: "auto", padding: "24px", ...style }}>
        <Document
          file={!file.includes(fileUrl) ? fileUrl + file : file}
          onLoadSuccess={onDocumentLoadSuccess}
          onLoadError={onDocumentLoadError}
        >
          {
            Array.from({ length: numPages }).map((_, index) => (
              <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
            ))
          }
        </Document>
      </div>
    </>
  );

  // 如果是内联模式，直接返回PDF内容
  if (inline) {
    return renderPdfContent();
  }

  const onDownloadFile = () => {
    isFullscreen && exitFullscreen();
    downloadFile({
      url: file,
      name,
    });
  };

  // 默认弹窗模式
  return (
    <div ref={fullscreenRef}>
      <Modal
        style={{ top: isFullscreen ? 0 : 100, maxWidth: isFullscreen ? "100vw" : "calc(100vw - 32px)", paddingBottom: isFullscreen ? 0 : 24 }}
        open={visible}
        maskClosable={false}
        width={isFullscreen ? "100vw" : pdfWidth + 100}
        title="PDF预览"
        onCancel={() => {
          isFullscreen && exitFullscreen();
          onCancel();
        }}
        getContainer={false}
        footer={[
          <Button
            key="cancel"
            onClick={() => {
              isFullscreen && exitFullscreen();
              onCancel();
            }}
          >
            关闭
          </Button>,
          !loading && <Button
            key="fullScreen"
            onClick={() => {
              isFullscreen ? exitFullscreen() : enterFullscreen();
            }}
          >
            {isFullscreen ? "退出全屏" : "全屏"}
          </Button>,
          <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
        ]}
      >
        {renderPdfContent()}
      </Modal>
    </div>
  );
}

export default Pdf;