使用react-pdf 实现pdf预览功能

 

"react-pdf": "^10.4.1",

 

import { useState, useRef, useEffect } from 'react';
import { Document, Page, Thumbnail, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';
import { message } from 'antd';import Flv from '@/components/Flv';
// 使用 CDN 加载 worker，避免 Vite 开发/构建时路径解析问题
pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;const PDF_URL = 'http://172.16.3.94:9000/lianchuangleftside/1942/123456.pdf';function App() {const [numPages, setNumPages] = useState(null);const [currentPage, setCurrentPage] = useState(1);const [error, setError] = useState(null);const [mainWidth, setMainWidth] = useState(null);useEffect(() => {const updateDimensions = () => {setMainWidth(document.body.clientWidth);};window.addEventListener('resize', updateDimensions);updateDimensions();return () => {window.removeEventListener('resize', updateDimensions);};}, []);const onDocumentLoadSuccess = ({ numPages }) => {setNumPages(numPages);setError(null);};const onDocumentLoadError = (err) => {setError(err?.message || '加载 PDF 失败');setNumPages(null);};const onClick = () => {if (!numPages) return;if (!mainWidth) return;const clickX = window.event?.clientX;if (clickX == null) return;const leftEdge = mainWidth * 0.1;const rightEdge = mainWidth * 0.9;if (clickX <= leftEdge && currentPage > 1) {setCurrentPage(currentPage - 1);} else if (clickX >= rightEdge && currentPage < numPages) {setCurrentPage(currentPage + 1);} else {message.info('点击页面左右两侧可以翻页哦！');}};return (<divonClick={() => {onClick();}}style={{overflow: 'hidden',height: '100vh',width: '100vw',display: 'flex',justifyContent: 'center',alignItems: 'center',background: 'linear-gradient(rgb(242, 245, 250) 0%, #e4ebf6 100%)',}}>{currentPage == 1 && (<Flvposter={null}type="mp4"url={'http://172.16.3.94:9000/lianchuangleftside/1942/output_h264.mp4'}autoPlay={false}height="98vh"width={'auto'}controls={true}style={{ position: 'absolute', zIndex: 9999 }}/>)}<Documentfile={PDF_URL}onLoadSuccess={onDocumentLoadSuccess}onLoadError={onDocumentLoadError}loading={<div>正在加载 PDF…</div>}>{numPages ? (<Pagewidth={mainWidth}pageNumber={currentPage}loading={<div>加载第 {currentPage} 页…</div>}/>) : (<div>正在加载 PDF…</div>)}</Document></div>);
}export default App;