react 的pdf預覽外掛應用

最近專案上有預覽PDF文件的需求，原本使用object實現這個功能，程式碼如下：

<object data={this.state.pdfContent}
         type="application/pdf"
         width="100%"
         height="1200px"
         standby="pdf文件載入中..."
>
         This browser does not support PDFs.
</object>

其效果圖如下：

但是此時頁面出現了兩個滾動條，不是我們想要的效果，而且也存在瀏覽器相容問題，因此，換用react-pdf 實現這一功能。先上一個修改好的效果圖：

使用react-pdf時，首先要安裝外掛：

npm i react-pdf

然後在元件中引用：

import { Document, Page } from 'react-pdf';

最後在元件render函式中引入

<Document
      file={this.state.pdfContent}//文件地址
      loading=""
      onLoadSuccess={this.onDocumentLoadSuccess}
>
      <Page 
          key={this.state.currentPage} 
          pageNumber={this.state.currentPage} //當前頁頁碼
          width={850}
       />
</Document>

其中onLoadSuccess為載入完的回撥函式

onDocumentLoadSuccess = ({ numPages }) => {//numPages是總頁數
        this.setState({ numPages });
};

注意：效果圖上的分頁是結合antd的Pagination來實現的。

react-pdf的具體文件連結：https://www.npmjs.com/package/react-pdf