vue 移动端查看预览pdf文件

我使用的是 vue-pdf，另外pdfjs-dist也可以实现(详情见下文)。

效果图：

打开pdf文件效果图

需求：

报告查询页面需要点击查看本地pdf文件

环境：vue3+vant

image.png

实现步骤：

安装 npm install --save vue-pdf
把本地pdf文件放在静态文件件下(一定是放在静态文件下，不然路径错误显示不了)
新建.vue文件

代码：

<template>
  <div class="container">
    <!--下载报告-->
    <div class="goback1">
      <div class="goBtn" @click="goBack">
        <i class="iconfont icon-fanhui-copy-copy">返回</i>
      </div>
      <div class="icon">
        <img src="../../../assets/projectImg/v2_projectImg/xiazai.png" style="width: 20%"/>
      </div>
      <div class="download">
        <span >下载到手机</span>
      </div>
    </div>
    <!--自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
    <div>
      <pdf
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler" >
      </pdf>
    </div>
    <!--页码-->
    <div class="pdf" v-show="fileType === 'pdf'">
      <div class="pagesize">
        <!--上一页-->
        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上页</span>
        {{currentPage}} / {{pageCount}}
        <!--下一页-->
        <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下页</span>
      </div>
    </div>
  </div>
</template>

<script>
  import pdf from 'vue-pdf'  // 引入pdf组件

  export default {
    metaInfo: {
      title: 'This is the test',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
      ]
    },
    components: {pdf},  // 引入pdf组件
    data () {
      return {
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
        pdfSrc: './80000202006000116.pdf' // pdf文件地址 (访问的本地文件，真实报告后续调接口)
      }
    },
    methods: {
      // 返回上级
      goBack(){
        this.$router.go(-1)
      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
    },
    created() {
      // this.loadPdfHandler();
      // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
      this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
    }
  }
</script>

<style lang="less" scoped>
 .pdf-box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .28rem;
    span {
      width: 100%;
    }
  }
</style>

特别注意：
文件一定要放在静态文件里，不然根本展示不出来，我在做的时候就因为这个原因找了半天，再此提醒

参考：
https://blog.csdn.net/weixin_30873847/article/details/99634693

pdfjs-dist实现方法:
https://blog.csdn.net/qq_39584800/article/details/87181731