kara-module-file-view/src/pdfViewer.js

kara module file view

// eslint-disable-next-line
import React from 'react'
import PropTypes from 'prop-types'
import pdfjsLib from 'pdfjs-dist'

class PDFViewer extends React.Component {
  componentDidMount = () => {
    // pdfjsLib.PDFJS.disableWorker = true
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/js/pdf.worker.min.js';

    const viewUrl = (this.props.file && this.props.file.preview) ? this.props.file.preview : ''
    if (viewUrl === '') return
    const loadingTask = pdfjsLib.getDocument(viewUrl)

    const ele = document.getElementById('theCanvas')
    ele.style.width = '100%'
    ele.style.height = '100%'
    ele.style.overflowX = 'hidden'
    ele.style.overflowY = 'scroll'
    ele.style.padding = '0px'
    ele.style.background = '#fff'

    loadingTask.promise.then((pdfDocument) => {
      // if (pdfDocument.numPages === 1) {
      //   ele.style.overflowY = 'hidden';
      // }
      // const isOnePage = (pdfDocument.numPages === 1);
      for (let id = 1, i = 1; i <= pdfDocument.numPages; i += 1) {
        pdfDocument.getPage(i).then((pdfPage) => {
          const boxWidth = ele.clientWidth
          // const boxHeight = ele.clientHeight;
          const pdfWidth = pdfPage.getViewport(1).width
          const scale = boxWidth / pdfWidth
          const viewport = pdfPage.getViewport(scale)
          const canvas = document.createElement('canvas')
          canvas.id = `page-${id}`
          id += 1
          canvas.width = viewport.width
          canvas.height = viewport.height
          // if (isOnePage && viewport.height <= boxHeight) {
          //   ele.style.overflowY = 'hidden';
          // }
          ele.appendChild(canvas)

          const ctx = canvas.getContext('2d')
          pdfPage.render({
            canvasContext: ctx,
            viewport,
          })
        })
      }
    })
  }
  // eslint-disable-next-line
  render() {
    return (
      <div id="theCanvas" />
    )
  }
}

PDFViewer.propTypes = {
  file: PropTypes.shape({
    preview: PropTypes.string,
  }).isRequired,
}

export default PDFViewer