react-pdf-js前端处理PDF的一种方式

「爱情、让人受尽委屈。」 2022-04-16 06:43 244阅读 0赞

### react-pdf-js前端处理PDF的一种方式 ###

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;

[codepen地址][codepen]

参考链接

1.  [npm地址][npm]
2.  [github地址][github]
3.  [demo地址][demo] 等待加载，一下就好

未完待续。。。

[codepen]: https://codepen.io/wwr1234567/pen/vrjbJO
[npm]: https://www.npmjs.com/package/react-pdf-js
[github]: https://github.com/mikecousins/react-pdf-js#readme
[demo]: http://mikecousins.github.io/react-pdf-js/