优化Pdf

src/components/Pdf/index.js

@@ -25,7 +25,6 @@ function Pdf(props) {
   const fileUrl = getFileUrl();
   const [numPages, setNumPages] = useState(0);
   const [pdfWidth, setPdfWidth] = useState(600);
-  const [loading, setLoading] = useState(true);
 
   const fullscreenRef = useRef(null);
 
@@ -36,11 +35,9 @@ function Pdf(props) {
 
   const onDocumentLoadSuccess = ({ numPages }) => {
     setNumPages(numPages);
-    setLoading(false);
   };
 
   const onDocumentLoadError = () => {
-    setLoading(false);
     message.error("加载 PDF 文件失败");
     if (onCancel)
       onCancel();
@@ -53,16 +50,16 @@ function Pdf(props) {
   // 内联模式的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}
+          loading={(
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "65vh" }}>
+              <Spin size="large" />
+            </div>
+          )}
         >
           {
             Array.from({ length: numPages }).map((_, index) => (
@@ -111,16 +108,14 @@ function Pdf(props) {
           >
             关闭
           </Button>,
-          !loading && (
-            <Button
-              key="fullScreen"
-              onClick={() => {
-                isFullscreen ? exitFullscreen() : enterFullscreen();
-              }}
-            >
-              {isFullscreen ? "退出全屏" : "全屏"}
-            </Button>
-          ),
+          <Button
+            key="fullScreen"
+            onClick={() => {
+              isFullscreen ? exitFullscreen() : enterFullscreen();
+            }}
+          >
+            {isFullscreen ? "退出全屏" : "全屏"}
+          </Button>,
           <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
         ]}
       >