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

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

import _regeneratorRuntime from "@babel/runtime/regenerator";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import pdfjs from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
import Alert from './Alert';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
var pdf = null;

var RenderPdf = function RenderPdf(_ref) {
  var document = _ref.document,
      withCredentials = _ref.withCredentials,
      password = _ref.password,
      pageNum = _ref.pageNum,
      scale = _ref.scale,
      rotation = _ref.rotation,
      pageCount = _ref.pageCount,
      protectContent = _ref.protectContent,
      watermark = _ref.watermark,
      alert = _ref.alert;

  var _useState = useState({
    status: false,
    message: ''
  }),
      error = _useState[0],
      setError = _useState[1];

  var canvasRef = useRef(null);
  var AlertComponent = alert || Alert;

  var fetchPDF = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var objDocInit, page, viewport, canvas, canvasContext, renderContext, renderTask, text, diagonal, opacity, size, color, metrics, width, height;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              objDocInit = {
                withCredentials: withCredentials,
                password: password
              };

              if (document.url === undefined) {
                objDocInit.data = atob(document.base64);
              } else {
                objDocInit.url = document.url;
              }

              _context.next = 5;
              return pdfjs.getDocument(objDocInit).promise;

            case 5:
              pdf = _context.sent;
              _context.prev = 6;
              _context.next = 9;
              return pdf.getPage(pageNum);

            case 9:
              page = _context.sent;
              viewport = page.getViewport({
                scale: scale,
                rotation: rotation
              }); // Prepare canvas using PDF page dimensions

              canvas = canvasRef.current;
              canvas.height = viewport.height;
              canvas.width = viewport.width; // Render PDF page into canvas context

              canvasContext = canvas.getContext('2d');
              renderContext = {
                canvasContext: canvasContext,
                viewport: viewport
              };
              renderTask = page.render(renderContext);
              _context.prev = 17;
              _context.next = 20;
              return renderTask.promise;

            case 20:
              if (Object.entries(watermark).length !== 0) {
                // watermark config
                text = watermark.text, diagonal = watermark.diagonal, opacity = watermark.opacity, size = watermark.size, color = watermark.color; // setup watermark text for filling

                canvasContext.globalAlpha = opacity;
                canvasContext.font = size * scale + "px Comic Sans MS";
                canvasContext.fillStyle = color; // get the metrics with font settings

                metrics = canvasContext.measureText(text);
                width = metrics.width;
                height = size * scale; // height is font size

                canvasContext.translate(viewport.width / 2, viewport.height / 2); // rotate the context and center the text

                if (diagonal) {
                  canvasContext.rotate(-0.785);
                }

                canvasContext.fillText(text, -width / 2, height / 2);
              } // call pageCountfunction


              pageCount(pdf.numPages);
              _context.next = 28;
              break;

            case 24:
              _context.prev = 24;
              _context.t0 = _context["catch"](17);
              console.warn('Error occured while rendering !\n', _context.t0);
              setError({
                status: true,
                message: 'Erro ao renderizar !'
              });

            case 28:
              _context.next = 34;
              break;

            case 30:
              _context.prev = 30;
              _context.t1 = _context["catch"](6);
              console.warn('Error while reading the pages !\n', _context.t1);
              setError({
                status: true,
                message: 'Erro ao ler páginas !'
              });

            case 34:
              _context.next = 40;
              break;

            case 36:
              _context.prev = 36;
              _context.t2 = _context["catch"](0);
              console.warn('Error while opening the document !\n', _context.t2);
              setError({
                status: true,
                message: 'Erro ao abrir documento !'
              });

            case 40:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 36], [6, 30], [17, 24]]);
    }));

    return function fetchPDF() {
      return _ref2.apply(this, arguments);
    };
  }();

  useEffect(function () {
    fetchPDF();
  }, [document, password, pageNum, scale, rotation, pageCount]);

  if (error.status) {
    pageCount(-1);
    return /*#__PURE__*/React.createElement(AlertComponent, {
      message: error.message
    });
  }

  return /*#__PURE__*/React.createElement("canvas", {
    onContextMenu: function onContextMenu(e) {
      return protectContent ? e.preventDefault() : null;
    },
    ref: canvasRef,
    width: typeof window !== 'undefined' && window.innerWidth,
    height: typeof window !== 'undefined' && window.innerHeight
  });
};

RenderPdf.propTypes = process.env.NODE_ENV !== "production" ? {
  document: PropTypes.any.isRequired,
  withCredentials: PropTypes.bool,
  password: PropTypes.string,
  pageNum: PropTypes.number.isRequired,
  scale: PropTypes.number.isRequired,
  rotation: PropTypes.number.isRequired,
  pageCount: PropTypes.func,
  protectContent: PropTypes.bool,
  alert: PropTypes.any,
  watermark: PropTypes.shape({
    text: PropTypes.string,
    diagonal: PropTypes.bool,
    opacity: PropTypes.string,
    size: PropTypes.string,
    color: PropTypes.string
  })
} : {};
RenderPdf.defaultProps = {
  pageCount: function pageCount() {},
  protectContent: false,
  watermark: {}
};
export default RenderPdf;