移动端实现预览pdf

一、安装npm install --save vue-pdf
二、代码部分

<template>
  <div class="detail">
    <div class="pdfTop">
      <div class="left" @click="goBack"></div>
      <div style="font-size:16px" class="textpdf">{{name}}</div>
    </div>
    <div class="pdf" v-show="fileType === 'pdf'">
      <div style="overflow: hidden;" class="pdfbox">
        <pdf
          :src="pdfSrc"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler"
        ></pdf>
      </div>
      <p class="arrow">
        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
        {{currentPage}} / {{pageCount}}
        <span
          @click="changePdfPage(1)"
          class="turn"
          :class="{grey: currentPage==pageCount}"
        >下一页</span>
      </p>
    </div>
  </div>
</template>
<script>
import pdf from "vue-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 },
  // props: ['pdfSrc'],
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      pdfSrc: this.$route.query.pathUrl, // pdf文件地址
      name: "" // pdf文件地址
    };
  },
  mounted() {
   // 文件名
    var a = this.$route.query.title;
    var b = a.split(".");
    this.name = b[0];
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
  this.pdfSrc = pdf.createLoadingTask({
      url: this.$route.query.pathUrl,
     cMapUrl: CMAP_URL,
      cMapPacked: true,
    });

  },
  methods: {
    // 改变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; // 加载的时候先加载第一页
    },
    goBack() {
      let p = JSON.parse(localStorage.getItem("pdfid"));
      //   console.log(id);
      this.$router.go(-1);
      this.$router.push({
        query: { title: p }
      });
      //
    }
  }
};
</script>
<style  scoped>
.detail {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  position: absolute;
  background: #fff;
  left: 50%;
  /* position: relative; */
  /* left: 50%; */
  /* border: 1px solid red; */
}
.pdfTop {
  height: 50px;
  background: #1752db;
  color: #fff;
  line-height: 50px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.pdf {
  margin-top: 50px;
  position: absolute;
  left: 0;
}

.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: 0.28rem;
}
.pdf-box span {
  width: 100%;
}
.arrow {
  width: 100%;
  margin: auto;
  font-size: 14px;
  margin-top: 20px;
  display: block;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}
.pdfbox {
  margin-left: -7%;
  /* border: 1px solid red; */
  transform: scale(1.1);
  transform-origin: 0 0 0; /*以左上角为起点
    /* height: 550px !important; */
}
.textpdf {
  width: 70%;
  margin: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>