scinote-web/app/javascript/vue/shared/pdf_viewer.vue

<template>
  <div class="pdf-viewer" :class="{ 'blocked': pdf.blocked }">
    <div class="page-container">
      <div class="layers-container">
        <canvas class="pdf-canvas" :class="{ 'ready': !pdf.blocked }"
          :data-pdf-url="pdf.url"
          :data-pdf-worker-url="pdf.worker_url"
        ></canvas>
        <div class="textLayer"></div>
      </div>
    </div>
    <div class="pdf-toolbar">
      <button class="btn btn-light icon-btn prev-page">
        <i class="fas fa-arrow-left"></i>
      </button>
      <div class="page-counter sci-input-container">
        <input type="text" class="sci-input-field current-page" value=1>
        {{ i18n.t('pdf_preview.pages.of') }}
        <span class="total-page">...</span>
      </div>
      <button class="btn btn-light icon-btn next-page">
        <i class="sn-icon sn-icon-move"></i>
      </button>
      <div class="divider"></div>
      <div class="zoom-page">
        <select class="zoom-page-selector">
          <option value="auto">{{ i18n.t('pdf_preview.fit_to_screen') }}</option>
          <option v-for="i in Array.from(Array(12).keys())"
                  :selected="(i + 1) * 25 == 100"
                  :value="((i + 1) * 0.25).toString().replaceAll(/\.?0+$/g, '')"
                  :key="i">
            {{(i + 1) * 25}}%
          </option>
        </select>
      </div>
      <div class="sci-btn-group">
        <button class="btn btn-light icon-btn zoom-out">
          <i class="sn-icon sn-icon-search-minus"></i>
        </button>
        <button class="btn btn-light icon-btn zoom-in">
          <i class="sn-icon sn-icon-search-plus"></i>
        </button>
      </div>
    </div>
    <div class="blocked-screen">
      <img :src="blockedIcon">
      <p class="title">{{ i18n.t('pdf_previepw.blocked.title') }}</p>
      <p class="description">{{ i18n.t('pdf_preview.blocked.description') }}</p>
      <button class="btn btn-primary load-blocked-pdf">
        <i class="fas fa-cloud-download-alt"></i>
        {{ i18n.t('pdf_preview.blocked.submit_button') }}
      </button>
    </div>
  </div>
</template>

<script>
  import blockedIcon from '../images/pdf_js/blocked.svg'

  export default {
    name: 'PdfViewer',
    props: {
      pdf: { type: Object, required: true }
    },
    data() {
      return {
        blockedIcon,
        value: ''
      }
    },
    mounted() {
      // from legacy code in app/assets/javascripts/sitewide/pdf_preview.js
      PdfPreview.initCanvas();
    },
    methods: {
    }
  }
</script>