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);},

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

vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断
1.安装html2canvas和JsPdf //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install j ...
jsencrypt vue使用_在Vue项目中使用jsencrypt.js对数据进行加密传输
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. 使用yarn安装至Vue项目 yarn add jsencrypt --dev 或者使用n ...
vue项目中使用ckplayer.js封装视频播放组件
1.在index.html中引入ckplayer.js <script src="ckplayer/ckplayer.js" charset="utf-8" ...
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态 ...
一、在vue项目中使用mock.js（详解）
步骤1.搭建测试项目步骤1.1创建项目命令: vue create mock-demo 步骤1.2安装依赖命令: #使用axios发送ajax cnpm install axios--save ...

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

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

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

最新文章

热门文章