react-pdf 弹窗预览功能

import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import styles from './index.index.module.scss';
import { Button } from 'antd-mobile';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

interface Props {
  file: string;
  isBtn?: boolean;
  width?: number;
}

const Index = (props: Props): JSX.Element => {
  //pdf预览功能
  const [numPages, setNumPages] = useState(null);
  const [scale, setScale] = useState<number>(1);
  const [width, setWidth] = useState<number>(props.width || 375);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <div
        className={styles.nav}
        style={{ display: props.isBtn ? 'none' : '' }}
      >
        <Button
          fill="outline"
          size="mini"
          style={{ marginRight: '40px' }}
          onClick={() => {
            setScale(scale - 0.5);
          }}
        >
          缩小
        </Button>
        <Button
          fill="outline"
          size="mini"
          onClick={() => {
            setScale(scale + 0.5);
          }}
        >
          放大
        </Button>
      </div>

      <Document
        className={props.isBtn ? '' : styles.document}
        file={props.file}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page
            key={`page_${index + 1}`}
            pageNumber={index + 1}
            renderAnnotationLayer={false}
            renderTextLayer={false}
            width={width}
            scale={scale}
          />
        ))}
      </Document>
    </div>
  );
};

export default Index;