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文件
<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页面的代码
相关文章:
vue中pdf.js的使用,包括pdf显示,跳转指定页面,高亮关键词
目录 一、下载pdf.js 二、引入到本地的项目中 三、实现预览pdf 四、跳转到指定页面 五、利用pdf里面的find查找关键词 六、修改页面大小为实际大小 一、下载pdf.js https://github.com/mozilla/pdf.js 里面有很多的版本, 高版本的可能浏览器不兼容或者还要考…...
【Spring Boot】自动装配机制详解
1. 传统的 Spring 注入方式(基于 XML 配置) 在传统的 Spring 中,依赖注入(DI)通常通过 XML 配置文件来进行管理。常见的方式有两种: 通过 <property> 元素进行属性注入: <bean id&qu…...
Flink集群搭建整合Yarn运行
Flink 集群 1. 服务器规划 服务器h1、h4、h5 2. StandAlone 模式(不推荐) 2.1 会话模式 在h1操作 #1、解压 tar -zxvf flink-1.19.1-bin-scala_2.12.tgz -C /app/#2、修改配置文件 cd /app/flink-1.19.1/conf vim conf.yaml ##内容:## j…...
Linux Ubuntu 安装配置RabbitMQ,springboot使用RabbitMQ
rabbit-Ubuntu 一篇文章学会RabbitMQ 在Ubuntu上查看RabbitMQ状态可以通过多种方式进行,包括使用命令行工具和Web管理界面。以下是一些常用的方法: 1-使用systemctl命令: sudo systemctl start rabbitmq-server sudo systemctl status ra…...
云数据库 MongoDB
MongoDB 是一个基于文档的 NoSQL 数据库,它与传统的关系型数据库不同,采用的是灵活的文档结构(类似 JSON 格式)。MongoDB 是开源的,且高度可扩展,通常用于处理大量的非结构化或半结构化数据。 云数据库 Mon…...
Ionic 8.4 简介
Ionic 是一个用于开发混合移动应用、渐进式Web应用(PWA)以及桌面应用的开源框架。它结合了 Angular、React 或 Vue.js 等现代前端框架与 Cordova/PhoneGap 的力量,允许开发者使用 Web 技术(HTML, CSS, JavaScript)构建…...
蓝桥杯系列---class1
🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 我们今天会再开一个系列,那就是蓝桥杯系列,我们会从最基础的开始讲起,大家想要备战明年蓝桥杯的,让我们一起加油。 工具安装 DevC…...
vue3+elementPlus封装的一体表格
目录结构 源码 exportOptions.js export default reactive([{label: 导出本页,key: 1,},{label: 导出全部,key: 2,}, ])index.vue <template><div class"flex flex-justify-between flex-items-end"><div><el-button-group><slot name…...
Junit5 单元测试入门
基础知识 常用注解含义 Test:标记一个方法为测试方法BeforeEach:标记的方法会在每个测试方法执行前执行AfterEach:标记的方法会在每个测试方法执行后执行BeforeAll:标记的方法会在所有测试方法执行前执行一次AfterAll࿱…...
数字信号处理-数学基础
来源哪都有,个人复习使用 一 积分 常用积分公式: 基本积分方法 凑微分法(也称第一换元法): 换元: 分部积分: 卷积 这里有动图解释: https://mathworld.wolfram.com/Convolution.html 欧拉公式 e i x…...
【Exp】# Microsoft Visual C++ Redistributable 各版本下载地址
Microsoft官方页面 https://support.microsoft.com/en-us/help/2977003/the-latest-supported-visual-c-downloads Redistributable 2019 X86: https://aka.ms/vs/16/release/VC_redist.x86.exe X64: https://aka.ms/vs/16/release/VC_redist.x64.exe Redistributable 201…...
Hive 分桶表的创建与填充操作详解
Hive 分桶表的创建与填充操作详解 在 Hive 数据处理中,分桶表是一个极具实用价值的功能,它相较于非分桶表能够实现更高效的采样,并且后续还可能支持诸如 Map 端连接等节省时间的操作。不过,值得注意的是,在向表写入数…...
[小白系列]Ubuntu安装教程-安装prometheus和Grafana
Docker安装prometheus 拉取镜像 docker pull prom/prometheus 配置文件prometheus.yml 在/data/prometheus/建立prometheus.yml配置文件。(/data/prometheus/可根据自己需要调整) global:scrape_interval: 15s # By default, scrape targets ev…...
Flask使用长连接
Flask使用flask_socketio实现websocket Python中的单例模式 在HTTP通信中,连接复用(Connection Reuse)是一个重要的概念,它允许客户端和服务器在同一个TCP连接上发送和接收多个HTTP请求/响应,而不是为每个新的请求/响…...
数据分析思维案例:游戏评分低,怎么办?
【面试题】 某款手游在应用市场评分相比同类型游戏处于劣势。 请分析可能的原因并给出相关建议。 【分析思路】 一、明确问题 1. 明确业务指标 定义:应用市场评分一般指某一应用在某个应用市场上线以来的总体平均评分。 除“总体平均评分”以外,部分应用…...
【学习总结|DAY012】Javabean书写练习
一、主要代码 public class Phone {public Phone() {}public Phone(String brand, int price, String color) {this.brand brand;this.price price;this.color color;}String brand;int price;String color;public String getBrand() {return brand;}public void setBrand(…...
Mac环境下brew安装LNMP
安装不同版本PHP 在Mac环境下同时运行多个版本的PHP,同Linux环境一样,都是将后台运行的php-fpm设置为不同的端口号,下面将已php7.2 和 php7.4为例 添加 tap 目的:homebrew仅保留最近的php版本,可能没有你需要的版本…...
openEuler 知:安装系统
文章目录 前言图形化安装文本方式安装 前言 本文只介绍安装过程中需要特别注意的地方,常规的内容需要参考其它文档。 图形化安装 自定义分区: 说明:anaconda 默认分区,在 OSNAME.conf 中进行了配置,openEuler 默认根…...
Zephyr 入门-设备树与设备驱动模型
学习链接:https://www.bilibili.com/video/BV1L94y1F7qS/?spm_id_from333.337.search-card.all.click&vd_source031c58084cf824f3b16987292f60ed3c 讲解清晰,逻辑清楚。 1. 设备树概述(语法,如何配置硬件,c代码如…...
点云标注软件SUSTechPOINTS的安装和使用,自测win10和ubuntu20.04下都可以用
点云标注软件SUSTechPOINTS的安装和使用 github项目源码:https://github.com/naurril/SUSTechPOINTS gitee源码以及使用教程:https://gitee.com/cuge1995/SUSTechPOINTS 首先拉取源码 git clone https://github.com/naurril/SUSTechPOINTS最好是在cond…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
高防服务器价格高原因分析
高防服务器的价格较高,主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因: 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器,因此…...
MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...
GraphRAG优化新思路-开源的ROGRAG框架
目前的如微软开源的GraphRAG的工作流程都较为复杂,难以孤立地评估各个组件的贡献,传统的检索方法在处理复杂推理任务时可能不够有效,特别是在需要理解实体间关系或多跳知识的情况下。先说结论,看完后感觉这个框架性能上不会比Grap…...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
背包问题双雄:01 背包与完全背包详解(Java 实现)
一、背包问题概述 背包问题是动态规划领域的经典问题,其核心在于如何在有限容量的背包中选择物品,使得总价值最大化。根据物品选择规则的不同,主要分为两类: 01 背包:每件物品最多选 1 次(选或不选&#…...
