我真是服气了，为了实现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);
},
},
