Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
需求：在pdf中鼠标滑动选中一段文字，将选中文字展示到input框中（pdf在iframe中）
完成效果：
关于pdf的引用：我是直接当做静态资源引用的，有需要的call我。
第一步：将pdf.js文件放入static中
第二步：页面模板引入，使用iframe+view.html模板， /static/pdf/web/viewer.html是我文件夹中view.html的路径， pdf文件地址拼接在后面，例如：file=‘pdf地址’，我将地址存入了vuex中，防止页面刷新数据丢失（如果有跨域问题，肯定有的哈哈，让你的后端小哥给你做一下跨域处理，我前端做的Proxy代理。。。这篇文章不做过多解释，有问题留言，我给你私聊详解）
//pdf展示模板<template><iframewidth="100%"height="100%":src="`/static/pdf/web/viewer.html?file=${$store.state.pdfUrl.slice(24)}`"frameborder="0"id="myIframe"></iframe></template>
第三步：写一个搜索框和一个按钮，用来输入或者滑选文字
//展示框模板<el-row style="width:70%;margin-bottom:10px"><el-col :span="20"><el-input prefix-icon="el-icon-search" v-model="selectText" placeholder="搜索字段"></el-input></el-col><el-col :span="4"><el-button>查询</el-button></el-col></el-row>
这是搜索框绑定的你要搜索的内容
data () {return {// 展示框绑定选中的文本selectText: '',}
第四部：滑选事件注册和执行，获取滑选文字
注册在method中，在mounted中执行，iframe页面加载完成就开始监听是否触发滑选事件，并将触发后的选中文本传入到iframe对象中（iframe.contentWindow是iframe的window对象）
mounted () {let vm = this;//这是滑选事件vm.f();}
methods: {// 滑选事件注册： 获取鼠标选中的文本f () {let vm = 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();console.log(choose);vm.selectText = choose;}, true);};},
到这里我们已经拿到了要搜索的内容，现在就差执行pdf.js的自带的搜索接口，我这里比较懒，直接调用的，所以各位大佬勿喷。上代码。
这里用到了postMessage（），因为iframe里嵌套了一个html,所以我要将数据传入到iframe中的html，这里的两个方法是注册在methods中，点击搜索之后触发。搜索就完成了。
// 发送数据(搜索文字)sendMessage () {let vm = this;//获取iframelet iframe = document.getElementById('myIframe');//将滑选数据传入到iframe中iframe.contentWindow.postMessage(vm.selectText, '*');},// 接受数据getMessage () {//获取iframelet 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);},
