pdf的预览，实现放大、缩小、翻页、跳转功能

admin管理员组

文章数量:1648928

1. 安装vue-pdf插件

npm install --save vue-pdf
或
yarn add  vue-pdf

2. 引入 pdf 文档地址

html代码：

<!--PDF 预览-->
    <el-dialog title=""
     			class="pdf-dialog-view"
               :modal="false"
               :visible.sync="viewVisible"
               width="33%"  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>

js代码：

import pdf from 'vue-pdf';
export default {
  components: {
    pdf
  },
  data() {
    return {
      //PDF预览
      viewVisible: false,
      src: "/电站工程特性表.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 = "/电站工程特性表.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 + ")";
    }
  }
};

css 代码：

<style scoped lang="scss">
	.pdf-dialog-view{
	  .el-dialog__headerbtn {
	    z-index: 3;
	    top: 10px;
	    .el-dialog__close{
	      color: #4a9ce4;
	      font-size: 22px;
	    }
	  }
	  .el-dialog{
	    margin: auto;
	    bottom: 5vh;
	  }
	  /deep/.el-dialog__header {
	    padding: 0;
	  }
	  /deep/.el-dialog__body {
	    padding: 0!important;
	    background-color: #004594;
	    color: white;
	  }
	}

	.pdf-preview-arrow {
	    -moz-user-select: none;
	    user-select: none;
	    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: #62a6ed;
	        margin: 0 8px;
	        cursor: pointer;
	      }
	    }
	    .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.14);
	        color: rgba(198, 226, 255, 0.8);
	        border: 1px solid rgba(0, 126, 255, 0.6);
	        padding: 0;
	        text-align: center;
	      }
	    }
	  }
	 .pdf-content {
	    overflow: auto;
	    margin-top: 30px;
	  }
</style>

实现效果：

预览文件时可能会出现以下错误

主要原因是：读取PDF文件时，路径不合法，导致读取不到文件； 在vue-cli3脚手架搭建的项目中，读取本地的PDF文件需要放到public文件夹中，在引用时，不能使用相对路径，且‘/’即表示public文件夹(需略去public)；

解决方案1：pdf本地文件需放在public文件夹下，且使用绝对路径
解决方案2：通过后台接口获取文件流，通过blob封装为pdf文件

本文标签： 跳转翻页功能PDF