react-pdf-js 的使用

A React component to wrap PDF.js

Install

yarn add react-pdf-jsornpm install react-pdf-js

Demo

http://mikecousins.github.io/react-pdf-js/
在此 demo 中可实现翻页的功能
实现的代码如下 ：

import React from 'react';
import PDF from 'react-pdf-js';

class MyPdfViewer extends React.Component {
  state = {};

  onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages });
  }

  handlePrevious = () => {
    this.setState({ page: this.state.page - 1 });
  }

  handleNext = () => {
    this.setState({ page: this.state.page + 1 });
  }

  renderPagination = (page, pages) => {
    let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    if (page === 1) {
      previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
    }
    let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    if (page === pages) {
      nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
      );
  }

  render() {
    let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
    return (
      <div>
        <PDF
          file="test.pdf"
          onDocumentComplete={this.onDocumentComplete}
          page={this.state.page}
        />
        {pagination}
      </div>
    )
  }
}

export default MyPdfViewer;

example

github react-pdf-js

import React from 'react';
import PDF from 'react-pdf-js';

class Demo extends React.Component {
      render() {
    return (
      <div>
        <PDF
          file="http://.../xxx.pdf"
        />
      </div>
    )
  }
}

export default Demo;

note

使用 react-pdf-js 实现pdf 的展示，使用的 canvas 不随可视窗口的大小变化而变化，可使用 width 设置宽度。