react中使用react-pdf弹窗预览pdf

最近在做react项目，遇到一个需求，就是上传pdf后，点击可以弹窗预览pdf。如果用window.open（）的话，就是直接利用游览器自带的pdf预览功能打开。各家游览器效果不一样，我这里是要做一个点击之后弹窗展示，在查阅各个资料后，最后选择了react-pdf这款插件。下面分享一下踩坑经历。

步骤一：通过执行npm install react-pdf或者yarn add react-pdf来安装

步骤二：通过import { Document, Page, pdfjs } from 'react-pdf';引入

步骤三：全部参考代码

import React, { useState } from "react";
import { Form, Checkbox, Modal } from "antd";
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const Index = (props) => {
  const { title, isModalVisible, handleClose , file } = props;
  //pdf预览功能
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
  return (
    <div>