pdfjs-viewer-react v2.0.943

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'
        }
      ])