浅析前端实现pdf预览及使用pdfH5解决安卓端出现空白页或跳转下载的现象

一、利用iframe实现pdf预览

1、实现过程：将pdf路径设置给iframe的src属性

<iframe :src="pdfUrl" frameBorder="0"></iframe>

2、遇到的问题

　　电脑上测试正常，但是安卓端会出现空白页和直接跳转下载的现象，解决思路：想着用pdf.js，然后发现vue有一个插件vue-pdf，是基于pdf.js封装的，因此决定采用插件vue-pdf实现

二、vue-pdf插件实现预览

<template>
  <div class="pdf-container">
    <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      pdfSrc: '',
      numPages: null
    }
  },
  components: { pdf },
  created () {
    var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
  },
  mounted () {
    this.getNumPages()
  },
  methods: {
    getNumPages () {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
        console.log(' this.numPages', this.numPages)
      }).catch(err => {
        console.error('pdf 加载失败', err)
      })
    }
  }
}
</script>

　　部署到测试线app中测试还是存在空白页问题，于是换成插件pdfH5

三、pdfH5实现预览

<template>
  <div class="pdf-container">
    <div id="pdf-content"></div>
    <iframe v-if="docType!='pdf'" :src="pdfUrl" frameBorder="0"></iframe>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'Pdfh5',
  data () {
    return {
      docType: '',
      pdfh5: null,
      // 可引入网络文件或者本地文件,如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
      pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' 
    }
  },
  mounted () {
    this.docType = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (this.docType == 'pdf') {
      this.initPdf()
    } else {
      this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
  },
  methods: {
    initPdf () {
      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
      // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: this.$route.query.pdfSrc,
        goto: 1
        // 设置每一页pdf上的水印
        // logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
      })
      this.pdfh5.scrollEnable(true) // 允许pdf滚动
      // 监听pdf准备开始渲染，此时可以拿到pdf总页数
      this.pdfh5.on('ready', function () {
        console.log('总页数:' + this.totalNum)
      })
      // 监听pdf加载完成事件，加载失败、渲染成功都会触发
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
      })
    }
  }
}
</script>
<style  scoped>
.pdfjs {
  height: 100vh !important;
}
.pdf-container {
  width: 100%;
  height: 100%;
}
</style>

　　最终测试，该方案可以。

　　插件地址：https://toscode.mulanos.cn/gjTool/pdfh5