优化Pdf

components/Pdf/index.js

@@ -1,8 +1,12 @@
-import { message, Modal, Spin } from "antd";
-import { useState } from "react";
+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/index";
+import { getFileUrl } from "../../utils";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import "./index.less";
 
 /**
  * PDF查看组件
@@ -22,6 +26,11 @@ function Pdf(props) {
   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 }) => {
@@ -48,14 +57,14 @@ function Pdf(props) {
           <Spin size="large" />
         </div>
       )}
-      <div style={{ height: "88vh", overflowY: "auto", padding: "24px", ...style }}>
+      <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((el, index) => (
+            Array.from({ length: numPages }).map((_, index) => (
               <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
             ))
           }
@@ -69,36 +78,52 @@ function Pdf(props) {
     return renderPdfContent();
   }
 
-  const { loading: downloadFileLoading, downloadFile } = useDownloadFile();
-
   const onDownloadFile = () => {
-    Modal.confirm({
-      title: "提示",
-      content: "确定要下载此文件吗？",
-      onOk: () => {
-        downloadFile({
-          url: fileUrl,
-          name,
-        });
-      },
+    isFullscreen && exitFullscreen();
+    downloadFile({
+      url: file,
+      name,
     });
   };
 
   // 默认弹窗模式
   return (
-    <Modal
-      open={visible}
-      maskClosable={false}
-      width={pdfWidth + 100}
-      title="PDF预览"
-      onCancel={onCancel}
-      cancelText="关闭"
-      okText="下载"
-      onOk={onDownloadFile}
-      loading={downloadFileLoading}
-    >
-      {renderPdfContent()}
-    </Modal>
+    <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>,
+          <Button
+            key="fullScreen"
+            onClick={() => {
+              isFullscreen ? exitFullscreen() : enterFullscreen();
+            }}
+          >
+            {isFullscreen ? "退出全屏" : "全屏"}
+          </Button>,
+          <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
+        ]}
+      >
+        {renderPdfContent()}
+      </Modal>
+    </div>
   );
 }
 

components/Pdf/index.less

@@ -0,0 +1,3 @@
+.react-pdf__Page__canvas{
+  margin: 0 auto;
+}