vue 之 pdf预览

vue 之 pdf预览

加载包：pdfvuer

npm i pdfvuer

引入：

import pdfvuer from 'pdfvuer'

组件代码(简化版)：

<template>
  <div id="pdfvuer">
    <div ref="buttons" id="buttons">
      <a class="item" @click="page > 1 ? page-- : 1">
        <i class="left chevron icon"></i>
        上一页
      </a>
      <a class="item" @click="page < numPages ? page++ : 1">
        下一页
        <i class="right chevron icon"></i>
      </a>
    </div>
    <div style=" 800px;margin:20px auto;">
      <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
           :scale.sync="scale" style="100%;">
        <template slot="loading">
          loading content here...
        </template>
      </pdf>
    </div>
  </div>
</template>

<script>
import pdfvuer from 'pdfvuer'
export default {
  components: {
    pdf: pdfvuer
  },
  data () {
    return {
      page: 1,
      numPages: 0,
      pdfdata: undefined,
      errors: [],
      scale: 'page-width'
    }
  },
  computed: {
    formattedZoom () {
      return Number.parseInt(this.scale * 100)
    }
  },
  mounted () {
    this.getpdfUrl()
  },
  watch: {
    show: function (s) {
      if (s) {
        this.getpdfUrl()
      }
    },
    page: function (p) {
      if (window.pageYOffset <= this.findPos(document.getElementById(p)) || (document.getElementById(p + 1) && window.pageYOffset >= this.findPos(document.getElementById(p + 1)))) {
        document.getElementById(p).scrollIntoView()
      }
    }
  },
  methods: {
    getPdf () {
      let self = this
      self.pdfdata = pdfvuer.createLoadingTask('./a.pdf')
      self.pdfdata.then(pdf => {
        self.numPages = pdf.numPages
        window.onscroll = function () {
          changePage()
          stickyNav()
        }

        var sticky = this.$refs.buttons.offsetTop

        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function stickyNav () {
          if (window.pageYOffset >= sticky) {
            this.$refs.buttons.classList.remove('hidden')
          } else {
            this.$refs.buttons.classList.add('hidden')
          }
        }

        function changePage () {
          var i = 1, count = Number(pdf.numPages)
          do {
            if (window.pageYOffset >= self.findPos(document.getElementById(i)) &&
              window.pageYOffset <= self.findPos(document.getElementById(i + 1))) {
              self.page = i
            }
            i++
          } while (i < count)
          if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
            self.page = i
          }
        }
      }).catch(res => {})
    },
    findPos (obj) {
      return obj.offsetTop
    }
  }
}
</script>

<style lang="scss" scoped>
  #pdfvuer{
    background: #ccc;
    overflow: auto;
    height: 100%;
    position: relative;
    #buttons{
      position: fixed;
      right: calc(50% - 500px);
      bottom: 50px;
      z-index: 100000;
      a{
        border:2px solid #000;
        padding: 20px 10px;
        display: block;
        background: rgba(0,0,0,0.5);
        border-radius: 10px;
        color:#fff;
        margin-top: 10px;
      }
    }
  }
  /* Page content */
  .content {
    padding: 16px;
  }
</style>
<style>
  .page{
    margin-bottom: 15px;
  }
</style>

注意事项：

pdf文件需要放在public文件下

钻研不易，转载请注明出处......