@logicamente.info/react-pdf-viewer/es/Components/PDFViewer.js

A React PDF viewer component, bootstrap compatible, with controls based on PDF.js.

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

import React from 'react';
import PropTypes from 'prop-types';
import PDF from './RenderPdf';
import Navigation from './NavigationBar';
import Loader from './Loader';

var PDFViewer = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(PDFViewer, _React$Component);

  function PDFViewer(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      page: _this.props.page,
      pages: 0,
      scale: _this.props.scale,
      defaultScale: _this.props.scale,
      rotationAngle: _this.props.rotationAngle,
      isReady: false
    };
    _this.getPageCount = _this.getPageCount.bind(_assertThisInitialized(_this));
    _this.handlePrevClick = _this.handlePrevClick.bind(_assertThisInitialized(_this));
    _this.handleNextClick = _this.handleNextClick.bind(_assertThisInitialized(_this));
    _this.handleZoomIn = _this.handleZoomIn.bind(_assertThisInitialized(_this));
    _this.handleResetZoom = _this.handleResetZoom.bind(_assertThisInitialized(_this));
    _this.handleZoomOut = _this.handleZoomOut.bind(_assertThisInitialized(_this));
    _this.handleRotateLeft = _this.handleRotateLeft.bind(_assertThisInitialized(_this));
    _this.handleResetRotation = _this.handleResetRotation.bind(_assertThisInitialized(_this));
    _this.handleRotateRight = _this.handleRotateRight.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = PDFViewer.prototype;

  _proto.getPageCount = function getPageCount(pages) {
    if (this.state.pages !== pages) {
      this.setState({
        pages: pages,
        isReady: true
      });
    }
  };

  _proto.handlePrevClick = function handlePrevClick() {
    if (this.state.page === 1) return;
    this.setState({
      page: this.state.page - 1
    });

    if (this.props.onPrevBtnClick) {
      this.props.onPrevBtnClick(this.state.page - 1);
    }
  };

  _proto.handleNextClick = function handleNextClick() {
    if (this.state.page === this.pages) return;
    this.setState({
      page: this.state.page + 1
    });

    if (this.props.onNextBtnClick) {
      this.props.onNextBtnClick(this.state.page + 1);
    }
  };

  _proto.handleZoomIn = function handleZoomIn() {
    var checkScale = this.props.maxScale;

    if (this.state.defaultScale > this.props.maxScale) {
      checkScale = this.state.defaultScale;
    }

    if (this.state.scale < checkScale) {
      this.setState({
        scale: this.state.scale + this.props.scaleStep
      });
    }

    if (this.props.onZoom) {
      this.props.onZoom(this.state.scale + this.props.scaleStep);
    }
  };

  _proto.handleResetZoom = function handleResetZoom() {
    this.setState({
      scale: this.state.defaultScale
    });

    if (this.props.onZoom) {
      this.props.onZoom(this.state.defaultScale);
    }
  };

  _proto.handleZoomOut = function handleZoomOut() {
    var checkScale = this.props.minScale;

    if (this.state.defaultScale < this.props.minScale) {
      checkScale = this.state.defaultScale;
    }

    if (this.state.scale > checkScale) {
      this.setState({
        scale: this.state.scale - this.props.scaleStep
      });
    }

    if (this.props.onZoom) {
      this.props.onZoom(this.state.scale - this.props.scaleStep);
    }
  };

  _proto.handleRotateLeft = function handleRotateLeft() {
    if (this.state.rotationAngle !== -90) {
      this.setState({
        rotationAngle: -90
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(-90);
    }
  };

  _proto.handleResetRotation = function handleResetRotation() {
    if (this.state.rotationAngle !== 0) {
      this.setState({
        rotationAngle: 0
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(0);
    }
  };

  _proto.handleRotateRight = function handleRotateRight() {
    if (this.state.rotationAngle !== 90) {
      this.setState({
        rotationAngle: 90
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(90);
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        document = _this$props.document,
        withCredentials = _this$props.withCredentials,
        password = _this$props.password,
        loader = _this$props.loader,
        maxScale = _this$props.maxScale,
        minScale = _this$props.minScale,
        hideNavbar = _this$props.hideNavbar,
        hideZoom = _this$props.hideZoom,
        hideRotation = _this$props.hideRotation,
        navbarOnTop = _this$props.navbarOnTop,
        navigation = _this$props.navigation,
        css = _this$props.css,
        canvasCss = _this$props.canvasCss,
        onDocumentClick = _this$props.onDocumentClick,
        protectContent = _this$props.protectContent,
        watermark = _this$props.watermark,
        alert = _this$props.alert;
    var _this$state = this.state,
        page = _this$state.page,
        pages = _this$state.pages,
        scale = _this$state.scale,
        defaultScale = _this$state.defaultScale,
        rotationAngle = _this$state.rotationAngle;
    var NavigationElement = navigation;
    var pdf = /*#__PURE__*/React.createElement(PDF, {
      document: document,
      withCredentials: withCredentials,
      password: password,
      pageNum: page,
      scale: scale,
      rotation: rotationAngle,
      pageCount: function pageCount(num) {
        return _this2.getPageCount(num);
      },
      protectContent: protectContent,
      watermark: watermark,
      alert: alert
    });
    var nav = null;

    if (!hideNavbar && pages > 0) {
      nav = !navigation || navigation && typeof navigation === 'object' ? /*#__PURE__*/React.createElement(Navigation, {
        page: page,
        pages: pages,
        scale: scale,
        defaultScale: defaultScale,
        maxScale: maxScale,
        minScale: minScale,
        rotationAngle: rotationAngle,
        hideZoom: hideZoom,
        hideRotation: hideRotation,
        css: navigation ? navigation.css : undefined,
        handleNextClick: this.handleNextClick,
        handlePrevClick: this.handlePrevClick,
        handleZoomIn: this.handleZoomIn,
        handleResetZoom: this.handleResetZoom,
        handleZoomOut: this.handleZoomOut,
        handleRotateLeft: this.handleRotateLeft,
        handleResetRotation: this.handleResetRotation,
        handleRotateRight: this.handleRotateRight
      }) : /*#__PURE__*/React.createElement(NavigationElement, {
        page: page,
        pages: pages,
        scale: scale,
        defaultScale: defaultScale,
        maxScale: maxScale,
        minScale: minScale,
        rotationAngle: rotationAngle,
        hideZoom: hideZoom,
        hideRotation: hideRotation,
        handleNextClick: this.handleNextClick,
        handlePrevClick: this.handlePrevClick,
        handleZoomIn: this.handleZoomIn,
        handleResetZoom: this.handleResetZoom,
        handleZoomOut: this.handleZoomOut,
        handleRotateLeft: this.handleRotateLeft,
        handleResetRotation: this.handleResetRotation,
        handleRotateRight: this.handleRotateRight
      });
    }

    return /*#__PURE__*/React.createElement("div", {
      className: css || 'container text-center'
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: this.state.isReady ? 'none' : 'block'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      }
    }, loader || /*#__PURE__*/React.createElement(Loader, null))), /*#__PURE__*/React.createElement("div", {
      style: {
        display: this.state.isReady ? 'd-block' : 'd-none'
      }
    }, navbarOnTop ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, nav), /*#__PURE__*/React.createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      },
      onClick: onDocumentClick
    }, pdf)) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      },
      onClick: onDocumentClick
    }, pdf), /*#__PURE__*/React.createElement("div", null, nav))));
  };

  return PDFViewer;
}(React.Component);

PDFViewer.propTypes = process.env.NODE_ENV !== "production" ? {
  document: PropTypes.shape({
    url: PropTypes.string,
    // File path
    base64: PropTypes.string // PDF file encoded in base64

  }).isRequired,
  withCredentials: PropTypes.bool,
  password: PropTypes.string,
  loader: PropTypes.node,
  page: PropTypes.number,
  scale: PropTypes.number,
  scaleStep: PropTypes.number,
  maxScale: PropTypes.number,
  minScale: PropTypes.number,
  css: PropTypes.string,
  canvasCss: PropTypes.string,
  rotationAngle: PropTypes.number,
  onDocumentClick: PropTypes.func,
  onPrevBtnClick: PropTypes.func,
  onNextBtnClick: PropTypes.func,
  onZoom: PropTypes.func,
  onRotation: PropTypes.func,
  hideNavbar: PropTypes.bool,
  navbarOnTop: PropTypes.bool,
  hideZoom: PropTypes.bool,
  hideRotation: PropTypes.bool,
  protectContent: PropTypes.bool,
  watermark: PropTypes.shape({
    text: PropTypes.string,
    diagonal: PropTypes.bool,
    opacity: PropTypes.string,
    size: PropTypes.string,
    color: PropTypes.string
  }),
  alert: PropTypes.any,
  navigation: PropTypes.oneOfType([// Can be an object with css classes or react elements to be rendered
  PropTypes.shape({
    css: PropTypes.shape({
      navbarWrapper: PropTypes.string,
      zoomOutBtn: PropTypes.string,
      resetZoomBtn: PropTypes.string,
      zoomInBtn: PropTypes.string,
      previousPageBtn: PropTypes.string,
      pageIndicator: PropTypes.string,
      nextPageBtn: PropTypes.string,
      rotateLeftBtn: PropTypes.string,
      resetRotationBtn: PropTypes.string,
      rotateRightBtn: PropTypes.string
    })
  }), // Or a full navigation component
  PropTypes.any])
} : {};
PDFViewer.defaultProps = {
  page: 1,
  withCredentials: false,
  password: '',
  defaultScale: 1,
  scale: 1,
  scaleStep: 1,
  maxScale: 3,
  minScale: 1,
  rotationAngle: 0,
  hideNavbar: false,
  hideZoom: false,
  hideRotation: false,
  navbarOnTop: false
};
export default PDFViewer;