pdfjs-viewer-react

pdfjs-viewer

Display PDFs in your React app as easily as if they were images.

tl;dr

• Install by executing npm install pdfjs-viewer or yarn add pdfjs-viewer.
• Import by adding import PdfViewer from 'pdfjs-viewer'.
• Use by adding <PdfViewer file="..." width="..." height="..." />. file can be a URL or your pdf file path

Getting started

Installation

Add pdfjs-viewer to your project by executing npm install pdfjs-viewer or yarn add pdfjs-viewer.

Usage

Here's an example of basic usage:

import React,{ Component } from 'react';
import PropTypes from 'prop-types';
import PdfViewer from 'pdfjs-viewer';
 
export default class PdfComponent extends Component { 
    
  static propTypes = {
     /**
      *URL for fetching the component 
      */
    pdfUrl:PropTypes.string
  };
  constructor (props) {
    super (props);
  }
  render() {
 
    return (
      <PdfViewer file={this.props.pdfUrl} width="100%" height="532px"></PdfViewer>
    )
  }
}

Import and add below plugin code in "webpack.doc.display.prod.js" file

const CopyWebpackPlugin = require('copy-webpack-plugin');
 
new CopyWebpackPlugin([ 
    	{ from: 'node_modules/pdf-js/public/pdfjs', to: 'pdfjs' },
    	{ from: 'node_modules/pdf-js/public/pdfjs', to: 'public/pdfjs' }
    ])
   ]

Import and add below plugin code in "webpack.doc.display.dev.js" file

const CopyWebpackPlugin = require('copy-webpack-plugin');
 
new CopyWebpackPlugin([
        {
          from: 'node_modules/pdf-js/public/pdfjs',
          to: 'hpesc/pdfjs',
          toType: 'dir'
        }
      ])