front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化Pdf

master
LiuJiaNan 2025-12-29 09:48:30 +08:00
parent 327199b6e1
commit 11ebad7b4b
1 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Pdf/index.js
View File

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