前言：最近有關(guān)于在項(xiàng)目里預(yù)覽pdf的需求骤坐，找了好多資料锻拘，看了好多博客油吭，問(wèn)了好多人击蹲，最終用的技術(shù)是react-pdf。此文章是本人的使用心得~
1婉宰、安裝插件
npm i react-pdf
2歌豺、引用
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = '/public/pdf.worker.js'
- 注意：第二行代碼，剛開(kāi)始我是這樣寫(xiě)的：
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js心包，但是就會(huì)出現(xiàn)這個(gè)js文件偶爾加載失敗的問(wèn)題类咧，后來(lái)查了資料又問(wèn)東問(wèn)西，發(fā)現(xiàn)是請(qǐng)求的服務(wù)器不穩(wěn)定的原因蟹腾。所以我把這個(gè)js文件放在了node層（server端）痕惋，然后改為/public/pdf.worker.js路徑，相當(dāng)于通過(guò)自己的服務(wù)器請(qǐng)求它岭佳，就解決了
pdf.worker.js請(qǐng)求失敗
放在服務(wù)端
3血巍、使用
<Document
className="pdf_document"
file={taskDetail.fileUrl} //文件路徑
onLoadSuccess={onDocumentLoadSuccess} //成功加載文檔后調(diào)用
onLoadError={console.error} //加載失敗時(shí)調(diào)用
loading="正在努力加載中" //加載時(shí)提示語(yǔ)句
>
<Page pageNumber={page} />
</Document>
<Pagination className="pdf_page" showSizeChanger={false} onChange={handelOnChange} total={totalPage * 10} current={page} /> // antd的分頁(yè)器
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(0);
const onDocumentLoadSuccess = ({ numPages }: any) => {
// numPages是總頁(yè)數(shù)
setTotalPage(numPages);
}
const handelOnChange = (pages: any) => {
setPage(pages);
};
4、展示
按鈕可以點(diǎn)擊切換頁(yè)碼
5珊随、附上版本詳情
版本詳情
