diff --git a/components/Pdf/index.js b/components/Pdf/index.js index 038397f..857070b 100644 --- a/components/Pdf/index.js +++ b/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) { )} -
+
{ - Array.from({ length: numPages }).map((el, index) => ( + Array.from({ length: numPages }).map((_, index) => ( )) } @@ -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 ( - - {renderPdfContent()} - +
+ { + isFullscreen && exitFullscreen(); + onCancel(); + }} + getContainer={false} + footer={[ + , + , + , + ]} + > + {renderPdfContent()} + +
); } diff --git a/components/Pdf/index.less b/components/Pdf/index.less new file mode 100644 index 0000000..b46f836 --- /dev/null +++ b/components/Pdf/index.less @@ -0,0 +1,3 @@ +.react-pdf__Page__canvas{ + margin: 0 auto; +}