vue中pdf.js的使用,包括pdf显示,跳转指定页面,高亮关键词

目录

一、下载pdf.js

二、引入到本地的项目中

三、实现预览pdf

四、跳转到指定页面

五、利用pdf里面的find查找关键词

六、修改页面大小为实际大小

一、下载pdf.js

https://github.com/mozilla/pdf.js

里面有很多的版本, 高版本的可能浏览器不兼容或者还要考虑手机上面的,最好下载低版本的,这里是v2.16.105版本

二、引入到本地的项目中

在本地static里面创建文件夹pdfjs,然后将下载包里面的文件放进pdfjs。

pdf.js包的目录结构

三、实现预览pdf

1、本地的PDF文件,直接在浏览器地址栏打开

利用 web里面的viewer.html就可以直接打开pdf,里面有默认的一个pdf文档。

直接在浏览器地址栏打开pdf: 开发地址 + viewer.html文件夹地址

比如按照以上步骤方法为 http://192.168.0.109:8081/static/pdfjs/web/viewer.html

只要能打开没有报错就没有什么问题

2、后端返回的pdf地址, 这里是创建组件利用iframe显示pdf文件

java 复制代码
<template>
    <div>
        <iframe  id="myIframe" :src="iframeSrc" width="100%" height="100%"></iframe>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            iframeSrc: "../../../static/pdfjs/web/viewer.html",
        };
    }, 
}

只需要在上面的连接上加上一个file=your-pdf-url就行了:(这里是组件注意viewer.html存放的位置

比如:我的显示地址是:

this.iframeSrc='../../../static/pdfjs/web/viewer.html?file='+pdfUrl

解决报错:

出现这个错误就是跨域的问题,找到pdfjs/web/viewer.js文件,注销跨域代码就可以

// if (fileOrigin !== viewerOrigin) {

// throw new Error("file origin does not match viewer's");

// }

四、跳转到指定页面

根据pdf.js内置函数,可直接修改当前页面,没有太大的跳动,利用Iframe

const pdfFrame = document.getElementById('myIframe').contentWindow pdfFrame.PDFViewerApplication.page = 10

五、利用pdf里面的find查找关键词

search() {

const _iframe = document.getElementById('myIframe').contentWindow

_iframe.PDFViewerApplication.eventBus.dispatch("find", {

source: "",

type: "",

query: "政府组织",

phraseSearch: "",

caseSensitive: false,

entireWord: false,

highlightAll: true, //是否所有高亮

findPrevious: true,

matchDiacritics: true

},);

// 利用updatefindcontrolstate统计每页搜索条数

_iframe.PDFViewerApplication.eventBus.on('updatefindcontrolstate', (e) => {

console.log(e)

console.log(e.source._pageMatches);

})

},

六、修改页面大小为实际大小

修改viewer.js页面的代码

const DEFAULT_SCALE_VALUE = "auto"

// 修改成

const DEFAULT_SCALE_VALUE = "page-actual" //实际大小

修改viewer.html页面的代码

找到id="scaleSelectContainer" 下面的id="pageActualOption",如果有selected,就修改成selected="selected",没有就不改。

七、每次加载pdf都是在第一页

修改viewer.js页面的代码

找到 setInitialView函数 在里面添加一句代码:

this.pdfViewer.currentPageNumber=1;

八、修改pdf滚动方式为横向

修改viewer.html页面的代码

相关推荐
weixin-a1530030831610 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头36 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2293 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔3 小时前
CSS实现百分比水柱图
前端·css