美文网首页
使用vue-pdf 在移动端 查看PDF

使用vue-pdf 在移动端 查看PDF

作者: 前端小小生 | 来源:发表于2020-05-21 12:04 被阅读0次

vue-pdf是封装的PDF.js

<template>
  <div>
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 100%"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfurl: '', //传过来的初始的pdf路径 不包含 proxy中的代理路径
      src: '',
      numPages: 1,
      isFromDetail: false, //路由是否从detail页过来
    }
  },

  mounted() {
    this.pdfurl = this.$route.query.pdfurl
    // this.getNumPages('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')
    this.getNumPages(自己设置的proxy代理 + this.pdfurl)
  },
  methods: {
    getNumPages(url) {
      var loadingTask = pdf.createLoadingTask(url)
      loadingTask
        .then(pdf => {
          this.src = loadingTask
          this.numPages = pdf.numPages
        })
        .catch(err => {
          console.error('pdf加载失败', err)
        })
    }
  }
}
</script>

用以上方式有个BUG,但是不影响使用:
控制台,会在请求pdf时 报一堆错,猜测可能是vue-pdf源码中使用了具体的pdf的内容,在没有请求完pdf时,因为没有具体内容,所以会报错

相关文章

网友评论

      本文标题:使用vue-pdf 在移动端 查看PDF

      本文链接:https://www.haomeiwen.com/subject/irdzohtx.html