package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.1.8",
+  "version": "1.1.7",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",

src/components/Pdf/index.js

@@ -25,6 +25,7 @@ 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);
 
@@ -35,9 +36,11 @@ function Pdf(props) {
 
   const onDocumentLoadSuccess = ({ numPages }) => {
     setNumPages(numPages);
+    setLoading(false);
   };
 
   const onDocumentLoadError = () => {
+    setLoading(false);
     message.error("加载 PDF 文件失败");
     if (onCancel)
       onCancel();
@@ -50,16 +53,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) => (
@@ -108,6 +111,7 @@ function Pdf(props) {
           >
             关闭
           </Button>,
+          !loading && (
             <Button
               key="fullScreen"
               onClick={() => {
@@ -115,7 +119,8 @@ function Pdf(props) {
               }}
             >
               {isFullscreen ? "退出全屏" : "全屏"}
-          </Button>,
+            </Button>
+          ),
           <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
         ]}
       >