Reference:
https://www.npmjs.com/package/react-pdf
Example 1
import React, { useState } from 'react'; import { Document, Page } from 'react-pdf'; function MyApp() { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); } return ( <div> <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={pageNumber} /> </Document> <p>Page {pageNumber} of {numPages}</p> </div> );
Example 2
<div>
<Document
file={this.props.file}
onLoadSuccess={this.props.onDocumentLoadSuccess}
>
<Page pageNumber={this.props.pageNumber} />
</Document>
<p>
{this.props.pageNumber > 1 && (
<a onClick={() => this.props.setPageNumber(this.props.pageNumber - 1)} >
<
</a>
)}
Page {this.props.pageNumber} of {this.props.numPages}
{this.props.pageNumber < this.props.numPages && (
<a onClick={() => this.props.setPageNumber(this.props.pageNumber + 1)}
disabled={this.props.pageNumber < this.props.numPages ? '' : 'disabled'}>
>
</a>
)}
</p>
</div>
File can be from:
this.setState({
file: 'data:application/pdf;base64,' + encodeURI(response.data),
})
No comments:
Post a Comment