web-prod2/src/views/dashboard-screen/screen/screen_Bd_Dl_Ycxx/pdfViewer.vue

<template>
  <div class="pdf-wrap">
    <div class="actions">
      <button class="btn btn-sm btn-secondary" @click="handleScale(+0.1)">
        <i class="mdi mdi-magnify-plus-outline"/>
        放大
      </button>

      <button class="btn btn-sm btn-secondary" @click="handleScale(-0.1)">
        <i class="mdi mdi-magnify-minus-outline">
          缩小

        </i></button>
    </div>
    <div class="pdf-viewer-wrapper" v-dragscroll="true" :class="{zoomActive: scale > 1 }">
      <pdf
        v-if="render"
        ref="pdf"
        src="/static/工区/07延吉西运行工区-简洁版-模型.pdf"
      />
      <!--      <vue-pdf-embed ref="pdf" :scale="scale" source="/static/工区/07延吉西运行工区-简洁版-模型.pdf" />-->
      <!--    <vue-pdf-app ref="pdf"  pdf="/static/7.pdf"></vue-pdf-app>-->
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import { dragscroll } from 'vue-dragscroll'
import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed.js'
import VuePdfApp from 'vue-pdf-app'
import 'vue-pdf-app/dist/icons/main.css'

export default {
  name: 'PdfViewer',
  directives: { dragscroll },
  components: { pdf, VuePdfEmbed, VuePdfApp },
  data() {
    return {
      scale: 1,
      render: true,
      basicStyle: {
        width: 0,
        height: 0
      },
      toStyle: {
        width: 0,
        height: 0
      }
    }
  },
  created() {
    window['pdfIs'] = this
  },
  mounted() {
    this.basicStyle = {
      width: getComputedStyle(this.$refs.pdf.$el).width || 0,
      height: getComputedStyle(this.$refs.pdf.$el).height || 0
    }
  },
  methods: {
    handleScale(num) {
      this.scale += num
      if (this.scale < 0) {
        this.scale = 0
      }
      const style = this.basicStyle
      const w = parseFloat(style.width?.replace('px', ''))
      const h = parseFloat(style.height?.replace('px', ''))
      this.toStyle = {
        width: `${w * this.scale}px`,
        height: `${h * this.scale}px`
      }
      this.$refs.pdf.$el.style.width = this.toStyle.width
      this.$refs.pdf.$el.style.height = this.toStyle.height
    }
  }
}
</script>

<style lang="scss">
.pdf-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .pdf-viewer-wrapper {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    overflow: auto;
    &.zoomActive {
      cursor: grab;
    }
  }
}

</style>