react react-pdf实现在线pdf加载（翻页加载下拉滚动加载）

Posted 2021-12-28 在下月亮有何贵干

目录

• 导入react-pdf
• 在文件中引入并使用
• 下拉展示

导入react-pdf

npm i react-pdf -S

或

yarn add react-pdf

在文件中引入并使用

1. 从react-pdf引入会有不知名错误，react-pdf/dist/esm/entry.webpack并没有。
2. onLoadSuccess可以获取对应加载pdf的总页数，此处用函数onDocumentLoadSuccess保存为numPages。
3. Page设置属性pageNumber就是对应的pdf页数，参数基于1，这里展示第一页，可以通过添加按钮修改pageNumber的值达到切换pdf页面的效果。
4. 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/': '' ,
    ,
  

下拉展示

1. 其实就是一口气遍历渲染出来，创建了一个长度为总页数numPages的数组进行map，用index做页数的请求，不过index基于0，pageNumber基于1，因此index需要+1。
2. 示例比较粗糙，一口气展示，展示较少内容的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>
    );