美文网首页
使用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