关于vue-pdf 的预览基本使用以及放大缩小、上一页下一页、滚动翻页功能的实现

引入依赖包 npm install vue-pdf

业务需要，我把pdf预览直接放在弹出框里了，声明：我也是从别的博主那里学来哒，但是我找不到原文了，抱歉抱歉

在js中引入vue-pdf

import pdf from 'vue-pdf';

components: {

    pdf

  },

 在页面中的使用如下：

num-page 可以获取到pdf 的总页数

page-loaded 初始化

loaded:pdf加载

src:pdf的地址，如果前端需要加载一个本地的pdf，把pdf放在public文件夹下，例如：src为‘/test.pdf’

 

    <div class="pdf-content">
      <pdf
        :src="src"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        ref="pdfWrapper"
      >
      </pdf>
    </div>

 以下为页面的完整代码，供参考

 

<template>
  <!--PDF 预览-->
  <el-dialog title=""
        class="pdf-dialog-view"
              :visible.sync="viewVisible"
              width="53%"  top="39px"
              center
              @close='closeDialog'>
    <div >
      <div class="pdf-preview-arrow fx-row">
          <div class="icon-scale">
          <span @click="scaleD"><i class="el-icon-zoom-in"></i></span>
          <span @click="scaleX"><i class="el-icon-zoom-out"></i></span>
        </div>
        <div class="fx-row ml10">
          <span
            @click="changePdfPage(0)"
            class="turn"
            :class="{ grey: currentPage === 1 }"
          >
            <i class="el-icon-caret-left"></i>
          </span>
          <div>
            第
            <el-input
              v-model="pageNumber"
              class="page-number"
              @input="pageChange"
            ></el-input>
            页
          </div>
          <span
            @click="changePdfPage(1)"
            class="turn"
            :class="{ grey: currentPage === pageCount }"
            ><i class="el-icon-caret-right"></i
          ></span>
          <span> {{ currentPage }} / {{ pageCount }} </span>
        </div>
    </div>
    <div class="pdf-content">
      <pdf
        :src="src"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        ref="pdfWrapper"
      >
      </pdf>
    </div>
    </div>
  </el-dialog>

</template>

<script>
import pdf from 'vue-pdf';
export default {
  components: {
    pdf
  },
  data() {
    return {
      //PDF预览
      viewVisible: false,
      src: "/test.pdf",
      currentPage: 0,
      pageCount: 0,
      pageNumber: 1,
      scale: 1, //放大系数
    };
  },
  methods: {
    //PDF预览
    previewPDF(){
      this.src = pdf.createLoadingTask(this.src);
      this.viewVisible = true;
    },

    //关闭窗口初始化PDF页码
    closeDialog(){
      this.viewVisible = false;
      this.src = "/test.pdf"; 
    },

    loadPdfHandler () {
      // 加载的时候先加载第一页
      this.currentPage = 1;
      this.pageNumber = 1;
    },
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
        this.pageNumber = this.currentPage;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        this.pageNumber = this.currentPage;
      }
    },
    //跳转页面
    pageChange() {
      if (
        Number(this.pageNumber) > 0 &&
        Number(this.pageNumber) <= this.pageCount
      ) {
        this.currentPage = Number(this.pageNumber);
      } else {
        this.currentPage = 1;
        this.pageNumber = 1;
      }
    },
    //放大
    scaleD() {
      this.scale += 0.1;
      this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.pdfWrapper.$el.style.transformOrigin = "top center";
    },

    //缩小
    scaleX() {
      if (this.scale === 1) {
        return;
      }
      this.scale += -0.1;
      this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
    }
  }
};

</script>

<style scoped lang="less">
.pdf-dialog-view{
  .el-dialog__headerbtn {
    z-index: 3;
    top: 10px;
    .el-dialog__close{
      color: #fff;
      font-size: 22px;
    }
  }
  .el-dialog{
    margin: auto;
    bottom: 5vh;
  }
  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    padding: 0!important;
    background: linear-gradient(90deg, #96B3FF 0%, #5E8AF4 100%);;
    color: white;
  }
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.pdf-preview-arrow {
    padding: 14px 0;
    -moz-user-select: none;
    user-select: none;
    width: 300px;
    margin: auto;
    display: flex;
    // position: absolute;
    // right: 60px;
    // top: 8px;
    z-index: 3;
    line-height: 30px;
    .icon-scale,
    .turn {
      line-height: 38px;
      i {
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        margin: 0 8px;
        cursor: pointer;
      }
    }
    .fx-row{
      display: flex;
    }
    .page-number {
      display: inline-block;
      width: 40px;
      margin: 0 5px;
      /deep/.el-input__inner {
        width: 40px;
        height: 30px;
        line-height: 30px;
        background: rgba(74, 141, 240, 0.1);
        color: #fff;
        border: 1px solid #fff;
        padding: 0;
        text-align: center;
      }
    }
  }
  .pdf-content {
    overflow: auto;
    // margin-top: 30px;
  }
</style>