前言：最近有關(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、附上版本詳情

版本詳情