实现Vue移动端的PDF预览

关注

原创 2023-02-03 15:38:38 8k 阅读 AI 写同款· GEO 优化 ›

移动端pdf在线预览（pdfh5使用）这里我下载时候没有指定版本报了一些错，所以直接建议大家下载 1.4.3版本，执行 npm install pdfh5@1.4.3 成功后如下图： 3.引用pdf 的vue 页面最后的效果如下 (内容打码了，真实很清晰) 阅读详情

最近做到一个功能，PDF预览；这个功能看着蛮简单的，结果搞了两个下午，真是欲哭无泪。记录一下所查到的预览方法。
我在网上找了蛮多教程的，大致都是以下几个方法实现预览：

使用 iframe 标签
使用 embed 标签
安装 Vue 插件 vue-pdf
安装 Vue 插件 pdfh5

下面配合代码详细说我实现预览的过程吧！

iframe标签

<iframe :src="url" style="border: none;width: 100%;height: 100%;" frameborder="0" />

<script>
export default {
  data() {
    return {
      show: false, 
      url: '', // pdf地址
    }
  },
  methods: {
}
</script>

这个标签其实蛮方便的，毕竟上一页、下一页，跳转，下载都是齐全的，个人觉得如果是用在pc端就非常的舒适，一个标签解决所有，但是如果在移动端可能就有点小毛病；我这次需要在一个弹窗里预览PDF文件，在展示时样式就很丑（如下图），不过我没多挣扎就放弃了
在这里插入图片描述

embed 标签

<embed :src="url" type="application/pdf" width: 100% height: 100% >

<script>
export default {
  data() {
    return {
      show: false, 
      url: '', // pdf地址
    }
  },
  methods: {
}
</script>

这个方法有局限性，如果浏览器不支持PDF嵌入，那这个标签就什么也不展示。

Vue 插件 vue-pdf

npm install --save vue-pdf // 安装一下

<!--这是一次加载完，还可以分页展示，这里就不详细说了-->
<div class="toast">
          <PDF v-for="i in pageNum" :key="i" ref="pdf" :src="url" :page="i" style="width: 100%" />
</div>

<script>
import PDF from 'vue-pdf' // 引入
import { CellGroup, Field, Popup, Toast } from 'vant'
export default {
  components: {
    PDF, [CellGroup.name]: CellGroup, [Field.name]: Field, [Popup.name]: Popup, [Toast.name]: Toast
  },
  data() {
    return {
      show: false, // 打开弹窗
      url: '', // 预览地址
      currentPage: 0, // 页码
      pageNum: null
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    // 查看pdf
    lookPdf(item) {
      console.log('打开弹窗')
      this.getNumPages()
      this.show = true
    },
    getNumPages() {
      this.url = 'https://xxx/xxxx/test.pdf'
      const loadingTask = PDF.createLoadingTask(this.url)
      loadingTask.promise
        .then((pdf) => {
          this.pageNum = pdf.numPages
        })
        .catch((err) => {
          console.error('pdf 加载失败', err)
        })
    }
  }
}
</script>

这个方法，我之前做PC端的时候，真的很丝滑；但这次做移动端就开始报错，用浏览器调试时，一到移动端模式就开始报错（如下图），在网上找的解决教程也没起作用，果断放弃。毕竟要多给别的方法机会嘛！
在这里插入图片描述

npm install pdfh5

npm install pdfh5 // 安装一下

<template>
  <div class="m-pdf">
    <div id="pdf-content" />
  </div>
</template>

<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'Pdfh5',
  data() {
    return {
      pdfh5: null,
    }
  },
  mounted() {
  },
  methods: {
    initPdf(pdfUrl) {
      console.log('子组件的地址', pdfUrl)
      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以操作pdf，监听相关事件
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: pdfUrl
      })
      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>

// 父组件
<template>
  <button @click="showPdf">
  <div v-if = "show">
      <preview-pdf ref="previewPdfh5" style="height:450px;margin-bottom:12px;" />
   </div>
</template>
<script>
import PreviewPdf from '../pdf.vue'
export default {
components: {
    PreviewPdf
  },
  data() {
    return {
      show: false, 
      url: '', // pdf地址
    }
  },
  methods: {
  showPdf(){
     this.show
     this.url = 'https://xxx/xxxx/test.pdf' // pdf文件的地址
     this.$refs.previewPdfh5.initPdf(this.url) // 父组件调用子组件的方法，动态渲染pdf
  }
}
</script>

这个方法到这里也很丝滑，上述方法的问题都没有碰到；然而在调后端接口时，报错了。
在这里插入图片描述
真是欲哭无泪，我上网找教程，根本没有。接口传过来的PDF里有一些字段是动态变化的，就导致这个问题出现。在我不懈奋斗了几个小时之后，无意间看到了pdfh5的中文文档的一个参数例子（如图），问题就解决啦！
在这里插入图片描述
给代码加个参数

 methods: {
    initPdf(pdfUrl) {
      console.log('子组件的地址', pdfUrl)
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: pdfUrl,
        cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/' // 改一下这个参数的默认地址
      })
      this.pdfh5.scrollEnable(true) 
      this.pdfh5.on('ready', function() {
        console.log('总页数:' + this.totalNum)
      })
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
      })
    }
  }

这是我参考的文档地址：https://github.com/EncodingAESKey/pdfh5/blob/master/README.md

总结一下：磕磕碰碰也终于实现了功能。这几个方法都能实现功能；如果图方便就用iframe标签，图样式简洁且使用方法简单就用 vue-pdf 插件，图样式简洁且功能齐全就用 pdfh5 插件；至于embed 标签，我还没用过。不过我用 vue-pdf 插件遇到的问题，到现在也没解决好，不知道是不是移动端要添加什么配置，还是我代码环境不兼容；后面如果有好的解决方法，我会记得来更。

收录于