pdf.js 根据坐标高亮文本

需求：后端返回pdf中坐标数组，要求高亮坐标对应的数据
思路：pdf.js生成两层一层是canvas ,一层是文本层-具体表现为dom结构，一个一个div包裹文本，我操作改变的是canvas,至于为什么不操作dom文本层，因为我想玩一下canvas在pdf上面画矩形，用来高亮显示想要突出的内容，根据坐标.当然也可以操作dom结构改变文本，有兴趣的可以看其他作者的关于pdf.js.

methods: {
    // 绘制bboxes，bboxes:[[x0,y0,x1,y1,△x,△y],[x0,y0,x1,y1,△x,△y]...]
    //  pagesize: [588,1000],588是后端返给我canvas的width，另一个是height
    drawBboxes (bboxes, pagesize, pageno) {
    //获取 iframe
      let iframe = document.getElementById('myIframe');
      function drawColor (bboxes, pagesize, pageno) {
        function getRad (degree) {
          return degree / 180 * Math.PI;
        }
        let pagewidth = eval(pagesize)[0];
        let pageheight = eval(pagesize)[1];
        let pagenum = 'page' + pageno;
        let canvas = iframe.contentDocument.getElementById(pagenum);
        let orgwidth = canvas.width;
        let orgheight = canvas.height;
        let scaleXValue = orgwidth / pagewidth;
        let scaleYValue = orgheight / pageheight;
        let ctx = canvas.getContext('2d');
        ctx.translate(0, orgheight);
        ctx.rotate(getRad(180));
        ctx.scale(-1, 1);
        function fillColor ([x0, y0, x1, y1, lengX, lengY]) {
          ctx.beginPath();
          ctx.moveTo(x0 * scaleXValue, y0 * scaleYValue);
          ctx.lineTo(x1 * scaleXValue, y0 * scaleYValue);
          ctx.lineTo(x1 * scaleXValue, y1 * scaleYValue);
          ctx.lineTo(x0 * scaleXValue, y1 * scaleYValue);
          ctx.closePath();
          ctx.fillStyle = 'RGB(0, 100, 0,.2)';
          ctx.fill();
        }
        eval(bboxes).forEach(item => {
          fillColor(item);
        });
        ctx.setTransform(1, 0, 0, 1, 0, 0);
      };
      drawColor(bboxes, pagesize, pageno);
    },