Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能

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>
	          <iframe
	            width="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;
      //获取iframe
      let iframe = document.getElementById('myIframe');
      //将滑选数据传入到iframe中
      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);
    },