我真是服气了，为了实现pdf标注和绘制功能，搜索了大量文章，发现都要很多文章最后都要收费，而且是通过一个博主在多个平台发布的文章，这个功能有这么难么？
在经过一番折腾后，这是绘制和文字功能都是pdf自带的工具，根本不需要二次开发，我的这个工具栏没有这个功能原来是因为用了老版本的pdf.js。下面来对比一下新版老版的区别
新版本

image.png

老版本

image.png

如果大家只是简单的实现pdf预览功能可以使用老版本，如果要实现绘制和标注，一定要下载新版本

image.png

2，锚点功能
pdf的锚点功能需要通过文字搜索来实现

image.png

  <a-input-search v-model:value="selectText" style="margin-bottom: 8px" placeholder="Search"  @change="sendMessage" />
<iframe :src="'/pdf/web/viewer.html?file=' + `/ceshi2.pdf`" height="100%"  width="100%"
                                id="myIframe" />
mounted() {
        //这是滑选事件
        this.getSelectText();
        // 搜索时 接收数据
        this.getMessage()
        
    },
 methods: {
        // 滑选事件注册： 获取鼠标选中的文本
        getSelectText() {
            let _this = this;
            let iframe = document.getElementById('myIframe');
            let x = '';
            let y = '';
            let _x = '';
            let _y = '';
            // iframe 加载完成后执行并将双击事件过滤掉，因为双击事件可能也触发滑选，所以为了不误操作，将其剔除
            iframe.onload = function () {
                // 鼠标点击监听
                iframe.contentDocument.addEventListener('mousedown', function (e) {
                    x = e.pageX;
                    y = e.pageY;
                }, true);
                // 鼠标抬起监听
                iframe.contentDocument.addEventListener('mouseup', function (e) {
                    _x = e.pageX;
                    _y = e.pageY;
                    if (x == _x && y == _y) return; //判断点击和抬起的位置，如果相同，则视为没有滑选，不支持双击选中
                    var choose = iframe.contentWindow.getSelection().toString();
                    _this.selectText = choose;
                }, true);
            };
        },

        // 发送数据(搜索文字)
        sendMessage() {
            let vm = this;
            //获取iframe
            let iframe = document.getElementById('myIframe');
            //将滑选数据传入到iframe中
            debugger
            iframe.contentWindow.postMessage(vm.selectText, '*');
        },

        // 接受数据
        getMessage() {
            //获取iframe
            let iframe = document.getElementById('myIframe');
            // iframe监听是否有数据传入，将传入的数据作为参数传递给pdf.js的find接口
            iframe.contentWindow.addEventListener('message', function (e) {
                //这里打印一下，看是否拿到了传入的数据
                console.log(e.data);
                // 这里打印的是pdf.js暴露出来的find接口
                console.log(iframe.contentWindow.PDFViewerApplication.findBar);
                // 输入查询数据
                iframe.contentWindow.PDFViewerApplication.findBar.findField.value = e.data;
                // 要求查询结果全体高亮
                iframe.contentWindow.PDFViewerApplication.findBar.highlightAll.checked = true;
                // 上面两部已经OK，触发highlightallchange方法。OK。全部完成
                iframe.contentWindow.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');

            }, false);

        },

    },