pdfjs预览文件、根据内容定位具体位置并标红

1、首先安装pdfjs-dist（npm install pdfjs-dist），注意这里安装的版本要根据项目框架选定，安装太高版本有时候会带来各种各样的问题。

2、安装好之后通过以下方式进行引入

3、根据文件路径初始化文件，下图中的pdf就是文件对象

4、初始化文件之后就是展示文件了，为了防止文件过大，一次性加载卡顿的问题，利用canvas滚动加载的方式

5、加载预览文件之后最重要的就是文段的定位和标红了，我们的业务需要根据识别出来的违规内容然后对文档的内容进行定位，定位到了之后进行标红。这里定位的方式一种是前端直接根据文字匹配定位，一种是通过OCR识别返回具体的坐标进行定位。

6、最核心的是根据坐标进行定位，利用PDF.js 官方标准定位方式，通过：PDF 原始坐标 → 经过缩放 → 屏幕实际像素坐标，这个思路算出最终的实际坐标。

        try {

          if (!this.pdf) return

          const page = await this.pdf.getPage(pageNum)

          const originalViewport = page.getViewport({ scale: 1 })

          const referenceWidth = this.containerWidth || 800

          const baseScale = referenceWidth / originalViewport.width

          const scale = baseScale * this.scale

          const viewport = page.getViewport({ scale })

          const transform = viewport.transform

          const scaleX = Math.sqrt(transform[0] * transform[0] + transform[1] * transform[1])

          const scaleY = Math.sqrt(transform[2] * transform[2] + transform[3] * transform[3])

          const x1 = this.selectRed.positionXFirst * scaleX

          const x2 = this.selectRed.positionXLast * scaleX

          const y1 = this.selectRed.positionYFirst * scaleY

          const y2 = this.selectRed.positionYLast * scaleY

          highlightY = (y1 + y2) / 2

          this.highlightPoint = {

            x: Math.max(x1, x2),

            y: highlightY,

            pageNum: pageNum,

          }

        } catch (e) {

          console.error('Pre-calculate highlight position failed', e)

        }

7、然后根据坐标去添加标红图层，实现文字被标红的效果。