目录
导入react-pdf
npm i react-pdf -S
或
yarn add react-pdf
在文件中引入并使用
从react-pdf引入会有不知名错误，react-pdf/dist/esm/entry.webpack并没有。
onLoadSuccess可以获取对应加载pdf的总页数，此处用函数onDocumentLoadSuccess保存为numPages。
Page设置属性pageNumber就是对应的pdf页数，参数基于1，这里展示第一页，可以通过添加按钮修改pageNumber的值达到切换pdf页面的效果。
Document的file就是访问pdf路径，如果是本地路径也许不会有跨域问题，如果是在线pdf，开发时建议加上前缀进行proxy代理，项目上线后同样用nginx做一样的代理即可。此处代理/pdf/，将/pdf/后面请求的pdf文件转发去在线文件所在地址。
import React, { Component } from 'react'; import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; export default class index extends Component { state = { numPages: null, pageNumber: 1, }; onDocumentLoadSuccess = ({ numPages }) => { this.setState({ numPages }); }; render() { const { pageNumber } = this.state; return ( <div> <Document file={'/pdf/555.pdf'} onLoadSuccess={this.onDocumentLoadSuccess} > <Page width={window.screen.width} pageNumber={pageNumber} /> </Document> <button onClick={() => { pageNumber > 1 ? this.setState({ pageNumber: pageNumber - 1 }) : alert('前面没有了'); }} > 上一页 </button> <button onClick={() => { pageNumber < numPages ? this.setState({ pageNumber: pageNumber + 1 }) : alert('后面没有了'); }} > 下一页 </button> </div> ); } }
代理代码示例：
proxy:{ '/pdf/': { target: 'http://xxxxxxxxx:xxxx/', changeOrigin: true, pathRewrite: { '^/pdf/': '' }, }, }
下拉展示
其实就是一口气遍历渲染出来，创建了一个长度为总页数numPages的数组进行map，用index做页数的请求，不过index基于0，pageNumber基于1，因此index需要+1。
示例比较粗糙，一口气展示，展示较少内容的pdf时没有什么问题，如果pdf页数过多会出现性能问题，可以自行考虑加载方法（例如每滑动十页进行下面十页的加载）
import React, { Component } from 'react'; import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; export default class index extends Component { state = { numPages: null, pageNumber: 1, }; onDocumentLoadSuccess = ({ numPages }) => { this.setState({ numPages }); }; render() { const { pageNumber, numPages } = this.state; return ( <div> <Document file={'/pdf/555.pdf'} onLoadSuccess={this.onDocumentLoadSuccess} > {new Array(numPages).fill('').map((cur, index) => ( <Page key={index} width={window.screen.width} pageNumber={index + 1} /> ))} </Document> </div> ); } }
