本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

介绍如何在react的H5项目中使用react-pdf包处理pdf，提供两种展示形式的代码，并加以解释，工作中也许可以用到。

导入react-pdf

npm i react-pdf 

或

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>
    );
  }
}

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~