效果图：

1. 前端（vue）高亮是在canvas画布上进行操作实现的

  mounted() {
    window.addEventListener('scroll', this.highlight);
  },

 //荧光笔方法
    highlight(){
      const that=this;
      var el = document.getElementById('the-canvas');
      var ctx = el.getContext('2d');
      var canvaswidth = this.canvaswidth;
      var Width = (window.innerWidth - canvaswidth) / 2;
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var Height = 35;
      //设置绘制线条样式
      // ctx.strokeStyle = 'rgb(250,250,202)';
      ctx.strokeStyle = 'rgb(255,255,0)';
      ctx.globalAlpha = 1;
      ctx.lineWidth = 15;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      var  Isdraw=this.Isdraw;
      var Erase=this.Iserase;
      var isDrawing;//标记是否要绘制
      //存储坐标点
      let points = [];
      document.body.onpointerdown = function (e) {
        isDrawing = true;
        points.push({x: e.clientX - Width, y: e.clientY - Height + scrollTop});
        this.clientY = e.clientY - Height + scrollTop;

      };
      document.body.onpointermove = function (e) {
        if (isDrawing&&Isdraw===1&&Erase===0) {
          draw(e.clientX - Width, this.clientY);
        }
      };
      //点击点
      document.body.onpointerup = function (e) {
        if (isDrawing&&Isdraw===1) {
          // draw(e.clientX-Width, this.clientY);
        }
        points = [];

        isDrawing = false;
      };

      function draw(mousex, mousey) {
        points.push({x: mousex, y: mousey});
        ctx.globalCompositeOperation = "darken";//Retains the darkest pixels of both layers.
        ctx.beginPath();
        let x = (points[points.length - 2].x + points[points.length - 1].x) / 2,
          y = (points[points.length - 2].y + points[points.length - 1].y) / 2;
        if (points.length === 2) {
          ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
          ctx.lineTo(x, y);
        } else {
          let lastX = (points[points.length - 3].x + points[points.length - 2].x) / 2,
            lastY = (points[points.length - 3].y + points[points.length - 2].y) / 2;
          ctx.moveTo(lastX, lastY);
          ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, x, y);
        }
        ctx.stroke();
        points.slice(0, 1);
      }

    },

2. 前端将高亮过的文本传到后端，后端（springboot）来实现对pdf进行文本高亮，并保存高亮过文本的pdf
   PDF类库：free spire.Pdf.jar 3.9.0
   先引入依赖：

<dependency>
    <groupId>e-iceblue</groupId>
    <artifactId>spire.pdf.free</artifactId>
    <version>3.9.0</version>
</dependency>

<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <url>https://repo.e-iceblue.cn/repository/maven-public/</url>
    </repository>
</repositories>

高亮pdf文本使用方法

public static void main(String[] args) throws Exception {
        //加载PDF源文档
        PdfDocument pdf = new PdfDocument();
        pdf.loadFromFile("test.pdf");

        PdfTextFind[] result1;
        for (Object pageObj : pdf.getPages()) {
            PdfPageBase page =(PdfPageBase)pageObj;
            // 查找跨行文本
            result1 = page.findText("电子邮件", EnumSet.of(TextFindParameter.CrossLine)).getFinds();
            for (PdfTextFind find : result1) {
                //高亮文本
                find.applyHighLight(Color.pink);//指定高亮颜色
                find.getBounds();
            }
        }

        PdfTextFind[] result2;
        for (Object pageObj : pdf.getPages()) {
            PdfPageBase page =(PdfPageBase)pageObj;
            // 查找跨行文本
            result2 = page.findText("心智模型中内在的隐喻", EnumSet.of(TextFindParameter.CrossLine)).getFinds();
            for (PdfTextFind find : result2) {
                //高亮文本
                find.applyHighLight(Color.GREEN);//指定高亮颜色
                find.getBounds();
            }
        }

        //保存文档
        pdf.saveToFile("output.pdf", FileFormat.PDF);
        pdf.dispose();
    }