前言：最近有关于在项目里预览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、附上版本详情
版本详情
