使用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 (
    <div
      onClick={() => {
        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 && (
        <Flv
          poster={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 }}
        />
      )}
      <Document
        file={PDF_URL}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onDocumentLoadError}
        loading={<div>正在加载 PDF…</div>}
      >
        {numPages ? (
          <Page
            width={mainWidth}
            pageNumber={currentPage}
            loading={<div>加载第 {currentPage} 页…</div>}
          />
        ) : (
          <div>正在加载 PDF…</div>
        )}
      </Document>
    </div>
  );
}

export default App;

 对于umi3的项目在.umirc.ts

mfsu: false,