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

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时,因为没有具体内容,所以会报错

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容