react中预览pdf文件

 import React, { Component } from 'react';

    
 import { Document, Page } from 'react-pdf/dist/entry.webpack';
    
 import 'react-pdf/dist/Page/AnnotationLayer.css';
    
 import envconfig from "@/envconfig/envconfig"
    
 import './PDFView.less';
    
 import { getSearchQueryString } from '@/util/regexUtil'
    
  
    
 const options = {
    
   cMapUrl: 'cmaps/',
    
   cMapPacked: true,
    
 };
    
  
    
 export default class PDFView extends Component {
    
   state = {
    
     file: '',
    
     numPages: null,
    
   }
    
  
    
   componentDidMount(){
    
     const href = window.location.href
    
     const index = href.lastIndexOf("?")
    
     const search = href.slice(index)
    
     const name = getSearchQueryString(decodeURIComponent(search), "name")
    
     this.setState({file:`文件路径`)
    
     document.title = name.split("/")[name.split("/").length-1]
    
   }
    
   onFileChange = (event) => {
    
     this.setState({
    
       file: event.target.files[0],
    
     });
    
   }
    
  
    
   onDocumentLoadSuccess = ({ numPages }) => {
    
     this.setState({ numPages });
    
   }
    
  
    
   render() {
    
     const { file, numPages } = this.state;
    
  
    
     return (
    
       <div className="Example">
    
     <div className="Example__container">
    
       <div className="Example__container__document">
    
         <Document
    
           file={file}
    
           onLoadSuccess={this.onDocumentLoadSuccess}
    
           options={options}
    
         >
    
           {
    
             Array.from(
    
               new Array(numPages),
    
               (el, index) => (
    
                 <Page
    
                   key={`page_${index + 1}`}
    
                   pageNumber={index + 1}
    
                 />
    
               ),
    
             )
    
           }
    
         </Document>
    
       </div>
    
     </div>
    
       </div>
    
     );
    
   }
    
 }

 body {

    
     margin: 0;
    
     
    
     font-family: Segoe UI, Tahoma, sans-serif;
    
   }
    
   
    
   .Example {
    
     input, button {
    
       font: inherit;
    
     }
    
     background-color: rgb(82, 86, 89);
    
     header {
    
       background-color: rgb(50, 54, 57);
    
       box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    
       padding: 20px;
    
       color: white;
    
   
    
       h1 {
    
     font-size: inherit;
    
     margin: 0;
    
       }
    
     }
    
   
    
     &__container {
    
       display: flex;
    
       flex-direction: column;
    
       align-items: center;
    
       margin: 10px 0;
    
       padding: 10px;
    
   
    
       &__load {
    
     margin-top: 1em;
    
     color: white;
    
       }
    
   
    
       &__document {
    
     margin: 1em 0;
    
   
    
     .react-pdf {
    
       &__Document {
    
         display: flex;
    
         flex-direction: column;
    
         align-items: center;
    
       }
    
   
    
       &__Page {
    
         max-width: calc(~"100% - 2em");
    
         box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    
         margin: 1em;
    
   
    
         canvas {
    
           max-width: 100%;
    
           height: auto !important;
    
         }
    
       }
    
   
    
       &__message {
    
         padding: 20px;
    
         color: white;
    
       }
    
     }
    
       }
    
     }
    
   }