Friday, December 3, 2021

react-pdf, display pdf in react.js



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)} >
                                            &lt;
                                        </a>
                                    )}
                                    &nbsp;&nbsp;Page {this.props.pageNumber} of {this.props.numPages}&nbsp;&nbsp;
                                    {this.props.pageNumber < this.props.numPages && (
                                        <a onClick={() => this.props.setPageNumber(this.props.pageNumber + 1)}
                                            disabled={this.props.pageNumber < this.props.numPages ? '' : 'disabled'}>
                                            &gt;
                                        </a>
                                    )}
                                </p>
 

                            </div>

File can be from:

          this.setState({

            file: 'data:application/pdf;base64,' + encodeURI(response.data),
        })

No comments:

Post a Comment