在线直播系统源码，实现翻页加载、下拉滚动加载

在文件中引入并使用

从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';<br>import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';<br>export default class index extends Component {<br>  state = {<br>    numPages: null,<br>    pageNumber: 1,<br>  };<br>  onDocumentLoadSuccess = ({ numPages }) => {<br>    this.setState({ numPages });<br>  };<br>  render() {<br>    const { pageNumber } = this.state;<br>    return (<br>      <div><br>        <Document<br>          file={'/pdf/555.pdf'}<br>          onLoadSuccess={this.onDocumentLoadSuccess}<br>        ><br>          <Page width={window.screen.width} pageNumber={pageNumber} /><br>        </Document><br>        <button<br>          onClick={() => {<br>            pageNumber > 1<br>              ? this.setState({ pageNumber: pageNumber - 1 })<br>              : alert('前面没有了');<br>          }}<br>        ><br>          上一页<br>        </button><br>        <button<br>          onClick={() => {<br>            pageNumber < numPages<br>              ? this.setState({ pageNumber: pageNumber + 1 })<br>              : alert('后面没有了');<br>          }}<br>        ><br>          下一页<br>        </button><br>      </div><br>    );<br>  }<br>}

下拉展示

其实就是一口气遍历渲染出来，创建了一个长度为总页数numPages的数组进行map，用index做页数的请求，不过index基于0，pageNumber基于1，因此index需要+1。

示例比较粗糙，一口气展示，展示较少内容的pdf时没有什么问题，如果pdf页数过多会出现性能问题，可以自行考虑加载方法（例如每滑动十页进行下面十页的加载）。

import React, { Component } from 'react';<br>import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';<br>export default class index extends Component {<br>  state = {<br>    numPages: null,<br>    pageNumber: 1,<br>  };<br>  onDocumentLoadSuccess = ({ numPages }) => {<br>    this.setState({ numPages });<br>  };<br>  render() {<br>    const { pageNumber, numPages } = this.state;<br>    return (<br>      <div><br>        <Document<br>          file={'/pdf/555.pdf'}<br>          onLoadSuccess={this.onDocumentLoadSuccess}<br>        ><br>          {new Array(numPages).fill('').map((cur, index) => (<br>            <Page<br>              key={index}<br>              width={window.screen.width}<br>              pageNumber={index + 1}<br>            /><br>          ))}<br>        </Document><br>      </div><br>    );<br>  }<br>}