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 中可實現(xiàn)翻頁的功能
實現(xiàn)的代碼如下 ：
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 實現(xiàn)pdf 的展示阀溶，使用的 canvas 不隨可視窗口的大小變化而變化妓羊，可使用 width 設(shè)置寬度芯丧。
