vue实现pdf高亮显示，以及矩形绘图(vue-pdf插件使用)

<template>
  <div class="container" >
    <el-row style="padding: 10px 10px 10px 10px;width: 100% ; height: 100%">
      <!-- 上一页、下一页 -->
      <el-row  style="background-color: #fff;height: 100%">
        <!-- 输入页码 -->
        <el-row >
          <el-col :span="4" style="padding-top: 4px ; padding-left: 10px" >
            <input v-model.number="currentPage"
                   type="number"
                   class="inputNumber"
                   @input="inputEvent()"> / <span style="color:#666666">{{pageCount}}</span>
          </el-col>
          <el-col :span="2">
            <div @click="changePdfPage('first')"
                 style="color: #1787EE;line-height: 30px;cursor: pointer">
              首页
            </div>
          </el-col>
          <!-- 在按钮不符合条件时禁用 -->
          <el-col :span="2">
            <div @click="changePdfPage('pre')"
                 style="color: #1787EE;line-height: 30px;cursor: pointer"
                 :style="currentPage===1?'cursor: not-allowed;':''">
              上一页
            </div>
          </el-col>
          <el-col :span="2">
            <div @click="changePdfPage('next')"
                 style="color: #1787EE;line-height: 30px;cursor: pointer"
                 :style="currentPage===pageCount?'cursor: not-allowed;':''">
              下一页
            </div>
          </el-col>
          <el-col :span="2">
            <div @click="changePdfPage('last')"
                 style="color: #1787EE;line-height: 30px;cursor: pointer">
              尾页
            </div>
          </el-col>
          <el-col :span="2">
            <div @click="scaleD()"
                 style="color: #1787EE;line-height: 30px;cursor: pointer">
              放大
            </div>
          </el-col>
          <el-col :span="2">
            <div  @click="scaleX()"
                 style="color: #1787EE;line-height: 30px;cursor: pointer">
              缩小
            </div>
          </el-col>
          <el-col :span="4">
            <div  @click="printPdf"
                 style="color: #1787EE;line-height: 30px;cursor: pointer">
              打印
            </div>
          </el-col>
          <el-col :span="2">
            <div  @click="customQuery"
                  style="color: #1787EE;line-height: 30px;cursor: pointer">
              抽取
            </div>
          </el-col>
          <el-col :span="2">
            <div  @click="fillColorByPoint"
                  style="color: #1787EE;line-height: 30px;cursor: pointer">
              绘图
            </div>
          </el-col>
        </el-row>
        <el-row style="padding: 4px 4px 0px 4px;height: 100%">
          <el-row class="pdfArea" id = "container" ref="container">
            <div style="position: relative;width: 100%;height: 100%;overflow-y: auto"  @mousedown="mousedown" @mousemove="mousemove"
                 @mouseup="mouseup" @Mouseleave="Mouseleave">
              <pdf :src="`${getFilePath}`"
                   ref="pdf"
                   v-show="loadedRatio===1"
                   :page="currentPage"
                   @num-pages="pageCount=$event"
                   @progress="loadedRatio = $event"
                   @page-loaded="pageLoaded"
                   @loaded="loadPdfHandler"
                   @link-clicked="currentPage = $event"
                   style="width:100%; height: 100%;overflow-y: auto"
                   id="pdfID"
                   @click.native="onclickM($event)"></pdf>
            </div>
          </el-row>
        </el-row>
      </el-row>
    </el-row>

    <!-- 加载未完成时，展示进度条组件并计算进度 -->
    <div class="progress"
         v-show="loadedRatio!==1">
      <el-progress type="circle"
                   :width="70"
                   color="#53a7ff"
                   :percentage="Math.floor(loadedRatio * 100)"></el-progress>
      <br>
      <!-- 加载提示语 -->
      <span>{{remindShow}}</span>
    </div>
  </div>
</template>

<script>
  import pdf from 'vue-pdf'
  import vue from 'vue'

  export default {
    components: {
      pdf
    },
    props: {
      fileName: String,
      path:String,
      // 当前页数
      currentPage: {
        type: Number,
        default: 1
      }
    },
    computed:{
      getFilePath: function () {
        if(this.fileName!==''){
          return this.path +'?file=' + this.fileName
        }
        return this.path
      }
    },
    created () {
      // this.prohibit()
    },
    destroyed () {
      // 在页面销毁时记得清空 setInterval
      clearInterval(this.intervalID)
    },
    mounted () {
      let _this = this
      this.$nextTick(() => {
          setTimeout(() => {
            _this.setWatermarkContent("田伟");
          },3000)
      })
    },
    data () {
      return {
        // ----- loading -----
        remindText: {
          loading: '加载文件中，文件较大请耐心等待...',
          refresh: '若卡住不动，可刷新页面重新加载...'
        },
        remindShow: '加载文件中，文件较大请耐心等待...',
        intervalID: '',
        // ----- vuepdf -----
        // src静态路径: /static/xxx.pdf
        // src服务器路径: 'http://.../xxx.pdf'
        src: '你的pdf路径',

        // 总页数
        pageCount: 0,
        // 加载进度
        loadedRatio: 0,
        scale: 100,

        //  customPositionShow:false, //自定义位置
        //   showclose:false,
        startX: '',  //画画开始的X坐标
        startY: '',  //画画开始的Y坐标
        endX: '',    //画画结束的X坐标
        endY: '',    //画画结束的Y坐标
        isMouseDownInCanvas: '', //鼠标是否按下
        customcxt: '',      // cxt
        customRwidth: 1,    //原图与展示图片的宽度比
        customRheight: 1,   //原图与展示图片的高度比
        imgstyle: '',        //根据图片大小自适应样式
        canvasstyle: '',     //根据图片大小canvas自适应样式 居中显示
        canvasWidth: '',     //根据图片大小自适应canvas宽
        canvasHeight: '',    //根据图片大小自适应canvas高
        DivWidth: 1460,      //最大宽度
        DivHeight: 740,      //最大高度
      }
    },
    methods: {
      fillColorByPoint(){
        // 清除指定区域的所有像素
        this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
        this.customcxt.fillStyle = "rgba(255,255,0,0.5)"; //矩形框颜色	
        this.customcxt.lineWidth = "2";  //矩形框宽度
        this.customcxt.fillRect(238.44,456.6042,370.7885,478.5542);  //绘制矩形
      },
      //取消时返回组件调用处所需的数据
      customClose() {
        this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
        this.$emit('custom', { 'type': 1, 'data': '' });
      },
      //确定时返回组件调用处所需的数据
      customQuery() {
        this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
        //根据绘制进行图片裁剪

        //获取矩形框Left，Width'
        let cLeft = 0;
        let cWidth = 0;
        if (this.startX > this.endX) {
          cLeft = this.endX;
          cWidth = this.startX - this.endX;
        } else {
          cLeft = this.startX;
          cWidth = this.endX - this.startX;
        }

        //获取矩形框Top，Height
        let cTop = 0;
        let cHeight = 0;
        if (this.startY > this.endY) {
          cTop = this.endY;
          cHeight = this.startY - this.endY;
        } else {
          cTop = this.startY;
          cHeight = this.endY - this.startY;
        }

        var oMark = [];
        oMark['offsetLeft'] = parseInt(cLeft / this.customRwidth);
        oMark['offsetTop'] = parseInt(cTop / this.customRheight);
        oMark['offsetWidth'] = parseInt(cWidth / this.customRwidth);
        oMark['offsetHeight'] = parseInt(cHeight / this.customRheight);
        debugger
        this.$emit('custom', { 'type': 2, 'data': oMark });
      },

      //鼠标按下时执行
      mousedown(e) {
        // this.customcxt = this.$refs.pdf.$el.children[0].getContext("2d");// canvas显示层
        this.isMouseDownInCanvas = true;
        // 鼠标按下时开始位置与结束位置相同
        // 防止鼠标在画完矩形后 点击图画形成第二个图形
        this.endX = e.offsetX;
        this.endY = e.offsetY;
        this.startX = e.offsetX;
        this.startY = e.offsetY;
        this.mousemove(e)

      },
      //鼠标移动式时执行
      mousemove(e) {
        if (this.isMouseDownInCanvas) { // 当鼠标有按下操作时执行
          this.endX = e.offsetX;
          this.endY = e.offsetY;
          let wwidth = this.endX - this.startX;
          let wheigth = this.endY - this.startY;

          // 清除指定区域的所有像素
          this.customcxt.clearRect(0, 0, this.DivWidth, this.DivHeight);
          this.customcxt.strokeStyle = " #00ff00"; //矩形框颜色
          this.customcxt.lineWidth = "2";  //矩形框宽度
          this.customcxt.strokeRect(this.startX, this.startY, wwidth, wheigth);  //绘制矩形

        }
      },
      //鼠标松开时执行
      mouseup(e) {
        this.isMouseDownInCanvas = false;
      },

      Mouseleave(e) {
        this.isMouseDownInCanvas = false
      },
      //创建画板
      setWatermarkContent(content) {
        let id = "1.23452384164.1223412415";
        if (document.getElementById(id) !== null) {
          document.body.removeChild(document.getElementById(id));
        }
        let ele = document.createElement("canvas");
        ele.width = this.$refs.pdf.$el.children[0].clientWidth;
        ele.height = this.$refs.pdf.$el.children[0].clientHeight;
        this.DivWidth = ele.width;      //最大宽度
        this.DivHeight = ele.height ;      //最大高度
        let getCanvas = ele.getContext("2d");
        this.customcxt = getCanvas;
        ele.style.top = "0px";
        ele.style.left = "0px";
        ele.style.position = "absolute";
        document.getElementById("pdfID").appendChild(ele);
        return id;
      },
      //放大
      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) + "%";
      },
      printPdf(){ // 调用打印
        this.$refs.pdf.print()
      },
      // 打印全部
      pdfPrintAll() {
        this.$refs.pdf.handleOpen();
      },
      // 监听滚动条事件
      listenerFunction (e) {
        // document.getElementById('container').addEventListener('scroll', true)
      },
      // 页面回到顶部
      toTop () {
        document.getElementById('pdfID').scrollTop = 0
      },
      // 输入页码时校验
      inputEvent () {
        if (this.currentPage > this.pageCount) {
          // 1. 大于max
          this.currentPage = this.pageCount
        } else if (this.currentPage < 1) {
          // 2. 小于min
          this.currentPage = 1
        }
      },
      // 切换页数
      changePdfPage (val) {
        if (val === 'pre' && this.currentPage > 1) {
          // 切换后页面回到顶部
          this.currentPage--
          this.toTop()
        } else if (val === 'next' && this.currentPage < this.pageCount) {
          this.currentPage++
          this.toTop()
        } else if (val === 'first') {
          this.currentPage = 1
          this.toTop()
        } else if (val === 'last' && this.currentPage < this.pageCount) {
          this.currentPage = this.pageCount
          this.toTop()
        }
      },

      // pdf加载时
      loadPdfHandler (e) {
        // 加载的时候先加载第一页
        let _this = this ;
        this.currentPage = 1

        // _this.customcxt = this.$refs.pdf.$el.children[0].getContext("2d");// canvas显示层
      },
      pageLoaded(e){
      },
      onclickM(e){

      },
      // 禁用鼠标右击、F12 来禁止打印和打开调试工具
      prohibit () {
        // console.log(document)
        document.oncontextmenu = function () {
          return false
        }
        document.onkeydown = function (e) {
          if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {
            return false
          }
          if (e.keyCode === 18 || e.keyCode === 123) {
            return false
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    overflow: hidden;
    height: 100%;
    font-family: PingFang SC;
    width: 100%;
    /* justify-content: center; */
    position: relative;
  }

  /* 右侧功能按钮区 */
  .right-btn {
    height: 30px;
    width: 100%;
  }

  .pdfArea {
    position: relative;
    overflow-x: auto;
    padding: 4px;
    width: 100%;
    /*overflow-y: auto;*/
    height: calc(100% - 34px);
    border: 2px solid #999999;
  }

  /* ------------------- 输入页码 ------------------- */
  .pageNum {
    margin: 10px 0;
    font-size: 18px;
  }
  /*在谷歌下移除input[number]的上下箭头*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  /*在firefox下移除input[number]的上下箭头*/
  input[type='number'] {
    -moz-appearance: textfield;
  }

  .inputNumber {
    border-radius: 5px;
    border: 1px solid #999999;
    height: 25px;
    font-size: 18px;
    width: 40px;
    text-align: center;
  }
  .inputNumber:focus {
    border: 1px solid #00aeff;
    background-color: rgba(18, 163, 230, 0.096);
    outline: none;
    transition: 0.2s;
  }

  /* ------------------- 切换页码 ------------------- */
  .turn {
    background-color: #888888;
    opacity: 0.7;
    color: #ffffff;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
  }

  .turn-btn {
    background-color: #000000;
    opacity: 0.6;
    color: #ffffff;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .turn-btn:hover,
  .turn:hover {
    transition: 0.3s;
    opacity: 0.5;
    cursor: pointer;
  }

  /* ------------------- 进度条 ------------------- */
  .progress {
    position: absolute;
    right: 50%;
    top: 50%;
    text-align: center;
  }
  .progress > span {
    color: #199edb;
    font-size: 14px;
  }
  /*.inputNumber {*/
  /*  border-radius: 8px;*/
  /*  border: 1px solid #666666;*/
  /*  height: 35px;*/
  /*  font-size: 18px;*/
  /*  width: 60px;*/
  /*  text-align: center;*/
  /*}*/
  /*.inputNumber:focus {*/
  /*  border: 1px solid #00aeff;*/
  /*  background-color: rgba(18, 163, 230, 0.096);*/
  /*  outline: none;*/
  /*  transition: 0.2s;*/
  /*}*/
  .PDFViewer{
    background-color: #3a3a3a;
    font-size: 16px;
    height: 100%;
    overflow: scroll;
    a {
      text-decoration: none;
    }
    .PDFViewerHeader{
      background-color:white;
      color: #3a3a3a;
      height: 60px;
      line-height: 60px;
      h1 {
        margin: 0;
        padding-left: 20px;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
      }
      span {
        width: 100%;
        display: inline-block;
        text-align: center;
      }
    }
    .DownloadBtn{
      float: right;
    }
    .PDFViewerBody{
      padding: 40px;
    }
    .card {
      margin-bottom: 10px;
    }
  }
</style>