支持在H5/APP组件方式预览PDF文件实现，实现放大缩小

展示

1.安装 vue-pdf-app
网上说指定版本，这边安装最新的就行了
安装后查看版本是否安装成功
（遇到一个坑：不显示电子印章和签名，已经解决，帮忙的话私聊我噢~）

npm install vue-pdf-app --save

2.实现代码

<template>
    <div class="flex-col page">
      <div id="PDFAPP">
        <vue-pdf-app
          :pdf="pdfUrl"
          theme="light"
          :config="config"
          pageScale="page-fit"
          @after-created="afterCreated"
          @open="open"
          @pages-rendered="pagesRendered"
          class="pdf-view"
        >
        </vue-pdf-app>
        <div class="viewer-prepend">
          <div class="btn-box">
            <i
              class="iconfont iconsuoxiaofdj btn-in-box"
              @click.stop="zoomOut()"
            ></i>
            <i
              class="iconfont iconfangda1 btn-out-box"
              @click.stop="zoomIn()"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </template>
        
    <script>
  import VuePdfApp from "vue-pdf-app";
  import "vue-pdf-app/dist/icons/main.css";
  export default {
    name: "pdfView",
    components: {VuePdfApp },
    data() {
      return {
        pdfUrl:"",//pdf地址
        config: {
          toolbar: false,
        },
      };
    },
    props: {},
    watch: {},
    computed: {},
    created() {
    },
    methods: {
      /**
       * 执行周期开始
       */
      afterCreated(pdf_app) {
        window._pdfApp = pdf_app;
        console.log("创建后", pdf_app);
      },
      open() {
        console.log("pdf打开");
      },
      pagesRendered() {
        console.log("页面的渲染");
      },
      /**
       * 执行周期结束
       */
      goPrePage() {
        if (this.isFirstHistory()) {
          this.$router.push({ name: "home" });
        } else {
          this.$router.go(-1);
          this.$emit("colse");
        }
      },
      // 自定义放大缩小（网上好多方法是错误）   
      // 放大
      zoomIn() {
        window._pdfApp.zoomIn();
      },
      // 缩小
      zoomOut() {
        window._pdfApp.zoomOut();
      },
    },
  };
  </script>
        
  <style lang="scss" scoped>
  .pdf-app {
    background: #eee;
  }
  ::v-deep .page {
    border: none !important;
    margin: 20px !important;
  }
  #PDFAPP {
    height: calc(100vh - 50px) !important;
    text-align: center;
    .btn-box {
      .btn-in-box {
        position: absolute;
        bottom: 30px;
        right: 10px;
      }
      .btn-out-box {
        position: absolute;
        bottom: 80px;
        right: 10px;
      }
      i {
        font-size: 34px;
      }
      .input-page-num {
        border: 1px solid #ccc;
        width: 70px;
      }
    }
  }
  </style>