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

import { message, Modal, Spin } from "antd";
import { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";
import useDownloadFile from "../../hooks/useDownloadFile";
import { getFileUrl } from "../../utils/index";

/**
 * 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);

  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    "pdfjs-dist/build/pdf.worker.min.mjs",
    import.meta.url,
  ).toString();

  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: "80vh" }}>
          <Spin size="large" />
        </div>
      )}
      <div style={{ height: "88vh", overflowY: "auto", padding: "24px", ...style }}>
        <Document
          file={!file.includes(fileUrl) ? fileUrl + file : file}
          onLoadSuccess={onDocumentLoadSuccess}
          onLoadError={onDocumentLoadError}
        >
          {
            Array.from({ length: numPages }).map((el, index) => (
              <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
            ))
          }
        </Document>
      </div>
    </>
  );

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

  const { loading: downloadFileLoading, downloadFile } = useDownloadFile();

  const onDownloadFile = () => {
    Modal.confirm({
      title: "提示",
      content: "确定要下载此文件吗？",
      onOk: () => {
        downloadFile({
          url: fileUrl,
          name,
        });
      },
    });
  };

  // 默认弹窗模式
  return (
    <Modal
      open={visible}
      width={pdfWidth + 100}
      title="PDF预览"
      onCancel={onCancel}
      cancelText="关闭"
      okText="下载"
      onOk={onDownloadFile}
      loading={downloadFileLoading}
    >
      {renderPdfContent()}
    </Modal>
  );
}

export default Pdf;