使用React打开PDF文件

npm install react-pdf

import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

import React, { useState } from 'react';

const PDFViewer = () => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="path/to/your/pdf/file.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
};

export default PDFViewer;

import React from 'react';
import PDFViewer from './PDFViewer';

const App = () => {
  return (
    <div>
      <h1>PDF Viewer</h1>
      <PDFViewer />
    </div>
  );
};

export default App;