react预览pdf文件（react-pdf）

前言：最近有关于在项目里预览pdf的需求，找了好多资料，看了好多博客，问了好多人，最终用的技术是react-pdf。此文章是本人的使用心得~

1、安装插件
npm i react-pdf
2、引用

import { Document, Page, pdfjs  } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = '/public/pdf.worker.js'

• 注意：第二行代码，刚开始我是这样写的：pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js，但是就会出现这个js文件偶尔加载失败的问题，后来查了资料又问东问西，发现是请求的服务器不稳定的原因。所以我把这个js文件放在了node层（server端），然后改为/public/pdf.worker.js路径，相当于通过自己的服务器请求它，就解决了
  
  pdf.worker.js请求失败
  
  
  放在服务端
  
  3、使用

<Document
    className="pdf_document"
    file={taskDetail.fileUrl}   //文件路径
    onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用
    onLoadError={console.error} //加载失败时调用
    loading="正在努力加载中" //加载时提示语句
>
    <Page pageNumber={page} />
 </Document>
<Pagination className="pdf_page" showSizeChanger={false} onChange={handelOnChange} total={totalPage * 10} current={page} />   // antd的分页器      

const [page, setPage] = useState(1); 
const [totalPage, setTotalPage] = useState(0); 
const onDocumentLoadSuccess = ({ numPages }: any) => {
        // numPages是总页数
        setTotalPage(numPages);
}
const handelOnChange = (pages: any) => {
        setPage(pages);
 };    

4、展示

按钮可以点击切换页码

5、附上版本详情

版本详情