vue在线预览pdf文件，放大缩小，跳转至某页功能实现

引入vue-pdf与pdfjs-dist插件就报错，经查阅发现是版本兼容问题，最后重新安装vue-pdf：4.2.0版本，pdfjs-dist:2.5.207版本

vue中如何使用vue-pdf及相应报错解决_vue-pdf 安装报错-CSDN博客

实现pdf预览及一些功能，参考如下

vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能 ？_使iframe旋转pdf.js-CSDN博客

<template>
  <div>
    <div class="tools">
      <el-button type="text" @click="FirstPage()">
        <el-tooltip class="item" effect="light" content="第一页" placement="top"
          ><i class="el-icon-d-arrow-left"></i>
        </el-tooltip>
      </el-button>

      <el-button type="text" @click="changePdfPage(0)">
        <el-tooltip class="item" effect="light" content="上一页" placement="top"
          ><i class="el-icon-arrow-left"></i>
        </el-tooltip>
      </el-button>

      <el-button type="text" @click="changePdfPage(1)">
        <el-tooltip class="item" effect="light" content="下一页" placement="top"
          ><i class="el-icon-arrow-right"></i>
        </el-tooltip>
      </el-button>

      <el-button type="text" @click="lastPage()">
        <el-tooltip
          class="item"
          effect="light"
          content="最后一页"
          placement="top"
          ><i class="el-icon-d-arrow-right"></i>
        </el-tooltip>
      </el-button>

      <el-button
        type="text"
        @click="setIsExit()"
        v-show="!isExit"
        style="margin-right: 10px"
      >
        <el-tooltip
          class="item"
          effect="light"
          content="页码选择"
          placement="top"
          ><i class="el-icon-setting"></i>
        </el-tooltip>
      </el-button>

      <el-tooltip
        class="item"
        effect="light"
        content="页码选择"
        placement="top"
        v-show="isExit"
      >
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="pageSelect"
          size="mini"
        >
          <el-option
            v-for="item in pageCount"
            :key="item"
            :label="'第 ' + item + ' 页'"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-tooltip>
      <el-button type="text" @click="scaleD()">
        <el-tooltip class="item" effect="light" content="放大" placement="top"
          ><i class="el-icon-zoom-in"></i>
        </el-tooltip>
      </el-button>
      <el-button type="text" @click="scaleX()">
        <el-tooltip class="item" effect="light" content="缩小" placement="top"
          ><i class="el-icon-zoom-out"></i>
        </el-tooltip>
      </el-button>
      <el-button type="text" @click="clock()">
        <el-tooltip
          class="item"
          effect="light"
          content="顺时针旋转"
          placement="top"
          ><i class="el-icon-refresh-right"></i>
        </el-tooltip>
      </el-button>
      <el-button type="text" @click="counterClock()">
        <el-tooltip
          class="item"
          effect="light"
          content="逆时针旋转"
          placement="top"
          ><i class="el-icon-refresh-left"></i>
        </el-tooltip>
      </el-button>
      <el-button type="text" @click="downPDF">
        <el-tooltip class="item" effect="light" content="下载" placement="top"
          ><i class="el-icon-download"></i>
        </el-tooltip>
      </el-button>
      <el-button type="text" @click="printPDF">
        <el-tooltip class="item" effect="light" content="打印" placement="top"
          ><i class="el-icon-printer"></i>
        </el-tooltip>
      </el-button>
      <p class="total">
        <el-tooltip class="item" effect="light" content="当前页" placement="top"
          ><b style="color: #f56c6c; cursor: pointer">{{
            currentPage
          }}</b></el-tooltip
        >&nbsp;/&nbsp;
        <el-tooltip class="item" effect="light" content="总页数" placement="top"
          ><b style="color: #67c23a; cursor: pointer">{{
            pageCount
          }}</b></el-tooltip
        >
      </p>
    </div>
    <div class="main">
      <pdf
        ref="pdf"
        id="pdf"
        :src="src"
        :page="currentPage"
        :rotate="pageRotate"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
      ></pdf>
    </div>
  </div>
</template>

<script>
// pdf预览
import pdf from "vue-pdf";
import baseurl from "@/config/baseurl";
export default {
  name: "home",
  components: {
    pdf,
  },
  data() {
    return {
      value: 1,
      src: `${baseurl}/files${this.$store.getters.getFiles.path}`,
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 100,
      pageRotate: 0,
      isExit: false,
    };
  },
  methods: {
    // pdf加载时
    loadPdfHandler() {
      this.value = this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 第一页
    FirstPage() {
      this.value = this.currentPage = 1;
      this.isExit = false;
    },
    // 最后一页
    lastPage() {
      this.value = this.currentPage = this.pageCount;
      this.isExit = false;
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
      this.value = this.currentPage;
      this.isExit = false;
    },
    // 页码选择
    pageSelect() {
      this.currentPage = this.value;
      this.isExit = false;
    },
    setIsExit() {
      this.isExit = true;
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      // if (this.scale === 100) {
      //   return;
      // }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 顺时针
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针
    counterClock() {
      this.pageRotate -= 90;
    },
    downPDF() {
      var url = this.src;
      var tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = url;
      tempLink.setAttribute("download", "my.pdf");
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    },
    printPDF() {
      this.$refs.pdf.print();
    },
  },
};
</script>

<style scoped>
.btn {
  margin: 20px 0px;
}
.main {
  /* border: 2px solid #dcdfe6; */
  height: 700px;
  overflow: auto;
}
.el-button--text{
  font-size: 24px;
}
#pdf{
  margin: 0 auto;
}
.tools {
  display: flex;
  justify-content: end;
}
.total {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main::-webkit-scrollbar {
  width: 6px;
}
/* 修改 滚动条的 下面 的 样式 */
.main::-webkit-scrollbar-track {
  background-color: white;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* 修改 滑块 */
.main::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::v-deep .el-dialog {
  height: 735px;
  font-family: "楷体";
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #303133;
}
::v-deep .el-dialog__title,
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}
::v-deep .el-dialog__body {
  padding: 20px;
}
::v-deep .el-select {
  width: 95px;
  height: 28px;
  margin: 5px 20px 0px 20px;
}
</style>