需求：外部输入关键字，去查找预览出来的pdf文件中的关键字个数，返回到外部进行alert出来
解决： 使用postMessage进行监听
因为，pdf.js工具自带
代表着 中国金融 这个关键字在 此文档中出现 了 14次，
首先当然是找到这个方法啦，viewer.js一万多行源码啊，现在就可以开始了，
外面vue页面的input框触发change方法
<el-input v-model.trim="account.signatureKeyword" @change="checkKeyword(account.signatureKeyword, indexs, index)" :disabled="editFlag && editStatus"></el-input>因为我这边用到了双层循环，所以需要带里外index，进行精确保存
checkKeyword (val, indexs, index) { if (val.trim()) { let obj = { value: val, index: indexs, supIndex: index } this.sendMessage(obj) } }, sendMessage (msg) { document.getElementById('previewPdf').contentWindow.postMessage(msg, '*') }, bindEvent (element, eventName, eventHandler) { if (element.addEventListener) { // addEventListener support for IE8 element.addEventListener(eventName, eventHandler, false) } else if (element.attachEvent) { element.attachEvent('on' + eventName, eventHandler) } },在 viewer.js中找到自带触发的那个查询方法
bindEvent(window, 'message', function (e) { var _index = e.data.index; var _supIndex = e.data.supIndex; _this.findField.value = e.data.value; _this.highlightAll.checked = true; _this.dispatchEvent('highlightallchange'); setTimeout(function () { var result = document.getElementById('findResultsCount').innerText; var _obj = { result: result, index: _index, supIndex: _supIndex }; sendMessage(_obj); }, 400); });这里进行postmessage进行监听再传递出去，注意执行查询自带的查询方法，获得准确的关键字个数是需要时间的，具体不甚了解，只是打印出来发现了这个原因，so给了一个延时，上面的方法封装
var bindEvent = function (element, eventName, eventHandler) { if (element.addEventListener) { element.addEventListener(eventName, eventHandler, false); } else if (element.attachEvent) { element.attachEvent('on' + eventName, eventHandler); } }; var sendMessage = function (msg) { // Make sure you are sending a string, and to stringify JSON window.parent.postMessage(msg, '*'); };这样关键字和 关键字个数就这样一起可以被外部监听得到
外部vue文件的created的钩子函数下写，进行保存到变量中，保存的时候，这样关键字变化，我这里利用双向绑定实时更新！
this.bindEvent(window, 'message', (e) => { if (e.data) { if (e.data.result) { this.manageFormData.signatureOpponent[e.data.supIndex].sealIdList[e.data.index].signatureKeywordNumber = Number(e.data.result) } else if (e.data.result === '') { this.manageFormData.signatureOpponent[e.data.supIndex].sealIdList[e.data.index].signatureKeywordNumber = 0 } } })实际效果，我将保存改为直接alert出来
这里加2个链接，关于postMessage的，帮助了我很多，希望对大家也有用。
1 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
2 https://gist.github.com/pbojinov/8965299
