原生小程序如何使用pdf.js实现查看pdf,以及关键词检索高亮
1.下载pdf.js库文件
前往 pdf.js 的 官网 下载库文件,下哪个版本都可以,后者适用于旧版浏览器,所以我下载的是后者

下载完成后,因为微信小程序打包的限制,我将库文件放到项目的后台系统了,在h5端处理会比在小程序端处理方便,最后就用web-view标签嵌入到小程序即可;
2.将下载好的pdf.js导入h5项目
2.1、目录结构

2.2、h5端使用pdf.js
新建一个文件夹–>新建一个.vue文件用来展示pdf文件–>使用iframe标签承接pdf文件
运行能打开默认的pdf文件,就证明成功了

pdf.vue
<template><!-- pdf详情页 --><div><iframe :src="../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html" width="100%" height="700px;"></iframe></div>
</template><script >import { useRouter } from "vue-router";
export default {name: 'pdf',setup() {document.title = 'pdf详情页' // 修改本页面网页标题const route = useRouter()return {}}
}
</script><style></style>
注:有可能会出现以下报错,只需要找到viewer.html,将script标签的type修改成module即可


然后运行项目,本页面能打开默认的pdf文件就证明成功了

2.3、嵌入到小程序中

<template><!-- pdf详情页 --><div><iframe :src="file" width="100%" height="700px;"></iframe></div>
</template><script >import { useRouter } from "vue-router";
export default {name: 'pdf',setup() {document.title = 'pdf详情页' // 修改本页面网页标题const route = useRouter()console.log(route.currentRoute.value.query.file);let file = route.currentRoute.value.query.file; // 获取当前url参数if (file) {file = `../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html?file=${file}` // 找到参数则展示指定pdf} else {file = '../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html' // 若没有找到参数,打开默认pdf文件}return {file}}
}
</script><style></style>
通过小程序传来的参数,h5端就能访问到pdf,利用pdf.js自带的关键词检索,就能完成业务需求啦

如果出现跨域问题的话,在viewer.js文件中找到以下代码注释掉即可


相关文章:
原生小程序如何使用pdf.js实现查看pdf,以及关键词检索高亮
1.下载pdf.js库文件 前往 pdf.js 的 官网 下载库文件,下哪个版本都可以,后者适用于旧版浏览器,所以我下载的是后者 下载完成后,因为微信小程序打包的限制,我将库文件放到项目的后台系统了,在h5端处理会比在…...
「数据架构」MDM实现失败的主要原因
我经常参与一个组织的MDM程序,当他们在一个失败的项目之后向InfoTrellis请求帮助进行清理,或者开始尝试X,以实现对某些人来说非常困难的目标时。主数据管理实现失败的原因有很多,但是没有一个是由于在这些场景中使用的责备游戏的原…...
【Java基础 1】Java 环境搭建
🍊 欢迎加入社区,寒冬更应该抱团学习:Java社区 📆 最近更新:2023年4月22日 文章目录 1 java发展史及特点1.1 发展史1.2 Java 特点1.2.1 可以做什么?1.2.2 特性 2 Java 跨平台原理2.1 两种核心机制2.2 JVM…...
2023-4-26-C++11新特性之正则表达式
🍿*★,*:.☆( ̄▽ ̄)/$:*.★* 🍿 💥💥💥欢迎来到🤞汤姆🤞的csdn博文💥💥💥 💟💟喜欢的朋友可以关注一下…...
python接口自动化测试 requests库的基础使用
目录 简单介绍 Get请求 Post请求 其他类型请求 自定义headers和cookies SSL 证书验证 响应内容 获取header 获取cookies 简单介绍 requests库简单易用的HTTP库 Get请求 格式: requests.get(url) 注意:若需要传请求参数,可直接在 …...
Photon AI Translator 和做产品的一些思考
近 4 个月内我一直在做 Apple 平台的产品,虽然从使用量来说「简体中文」用户是占多数,但我一直有做多语言的支持:英语、简体中文和繁体中文。习惯上 Google 翻译的我,基本上在使用 Xcode 过程中也会一直在浏览器开着 Google Trans…...
IPTV系统架构的分析与研究
1 引言 IPTV业务是伴随着宽带互联网的飞速发展而兴起的一项新兴的互联网增值业务,它利用宽带互联网的基础设施,以家用电视机和电脑作为主要终端 ,利用网络机顶盒(STB,Set -TopBox) ,通过互联网协议来传送电视信号.提供包括 电视节 目在 内…...
workerman开发者必须知道的几个问题
1、windows环境限制 windows系统下workerman单个进程仅支持200个连接。 windows系统下无法使用count参数设置多进程。 windows系统下无法使用status、stop、reload、restart等命令。 windows系统下无法守护进程,cmd窗口关掉后服务即停止。 windows系统下无法在一个…...
golang Gin实现websocket
golang使用 Gin实现 websocket,这里笔者重新搭建一个项目 1、创建项目安装依赖 项目名为 go-gin-websocket 在指定文件夹下,新建项目文件夹 go-gin-websocket 进入项目文件夹,打开cmd窗口,在项目(go-gin-websocket&a…...
冯·诺依曼体系结构与初始操作系统
目录 冯诺依曼体系结构 冯诺依曼体系结构图 内存 外存 网卡和磁盘 结构之间运算速度的差异 缓冲区 初始操作系统 概念 操作系统上边与下边分别有什么 从上到下依次顺序解析 用户 用户操作接口 系统调用接口 操作系统四项管理 驱动 硬件 冯诺依曼体系结构 冯诺…...
软件测试之黑盒测试的具体方法详解
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一.基于需求的设计方法二.等价类三.边界值四.判定表4.1 **关系**4.2 如何设计测试用例4.3 实际案例第一步第二步第三步第四步 五.正交排列5.1 什么是正交表5.2 …...
图形编辑器:历史记录设计
大家好,我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录,做到撤销重做。 其实就是版本号的更替。每个版本保存一个状态。 数据结构 要记录图形编辑器的历史记录,支持撤销重做功能,需要两个栈:撤销࿰…...
ubuntu22.04下挂载第二块硬盘
文章目录 一、查看硬盘情况二、找到nvme1n1三、挂载四、修改分区文件 一、查看硬盘情况 首先要查看一下系统识别出来的设备。也就是说,我希望知道,ubuntu到底发现了几块硬盘。用命令:lsblk 显示结果如下: 有两块硬盘:…...
举例说明.net中in与out的作用与区别
-----作用 在 .NET 中,in 和 out 是用于泛型类型参数的修饰符,它们用于指定参数类型的协变性和逆变性。 - in 修饰符:表示这个泛型类型参数是协变的。也就是说,in 类型参数可以从较特殊的类型隐式转换为较通用的类型。例如&…...
Java常见的100道面试题(内附答案及代码示例)持续更新
什么是Java程序? Java程序是一组可执行的代码,由Java编译器编译生成,可以在Java虚拟机(JVM)上运行。 public class HelloWorld {public static void main(String[] args) {System.out.println("Hello, World!&qu…...
策略设计模式知多少
目录 目标 概述 实现 目标 熟悉策略设计模式,了解策略设计模式的使用场景、具体实现。 概述 一、行为设计模式 行为设计模式是设计模式的一种类型。该类型的设计模式关注的重点在于对象的行为(通信和交互),而非对象的创建方…...
第三十九章 配置镜像 - 配置 ISCAgent - 在 UNIX Linux 和 macOS 系统上为非根实例启动 ISCAgent
文章目录 第三十九章 配置镜像 - 配置 ISCAgent - 在 UNIX Linux 和 macOS 系统上为非根实例启动 ISCAgent在 UNIX/Linux 和 macOS 系统上为非根实例启动 ISCAgent在 Microsoft Windows 系统上启动 ISCAgent 自定义 ISCAgent 第三十九章 配置镜像 - 配置 ISCAgent - 在 UNIX Li…...
嵌入式安卓开发:使用Camera2获取相机
文章目录 Camera2介绍Camera2的主要API类介绍CameraManager通过CameraManage获取Cameracharacteristics通过CameraManage获取CameraDevice从CameraDevice获取CameraCaptureSession预览效果 参考 Camera2介绍 从Android 5.0开始,Google 引入了一套全新的相机框架 Ca…...
阿里云g8i服务器Intel Xeon(Sapphire Rapids) Platinum 8475B
阿里云服务器ECS通用型实例规格族g8i采用2.7 GHz主频的Intel Xeon(Sapphire Rapids) Platinum 8475B处理器,3.2 GHz睿频,g8i实例采用阿里云全新CIPU架构,可提供稳定的算力输出、更强劲的I/O引擎以及芯片级的安全加固。阿里云百科分享阿里云服…...
设计模式——组件协作模式之观察者模式
文章目录 前言一、“组件协作” 模式二、Observer 观察者模式1、动机2、模式定义3、伪代码示例①、第一种方案,最朴素的方式②、第二种方案,重构使得遵循DIP原则:③、进一步的小优化:④、修改使得支持多个观察者: 4、结…...
nli-distilroberta-base算法优化:利用LSTM思想增强序列上下文建模
nli-distilroberta-base算法优化:利用LSTM思想增强序列上下文建模 1. 效果展示背景 在自然语言推理任务中,nli-distilroberta-base作为轻量级Transformer模型表现出色,但在处理长文本序列时仍面临挑战。传统Transformer架构的自注意力机制虽…...
突破游戏视觉定制边界:LeaguePrank的安全实现与创新应用
突破游戏视觉定制边界:LeaguePrank的安全实现与创新应用 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 如何在不触及游戏核心文件的前提下,为英雄联盟客户端打造个性化视觉体验?随着玩家对…...
GCC开发者转LLVM必看:模块化设计带来的5个关键工作流变革
GCC开发者转LLVM必看:模块化设计带来的5个关键工作流变革 当GCC开发者第一次接触LLVM时,往往会惊讶于其完全不同的设计哲学。就像从单块巨石建筑转向预制模块化结构,LLVM的三段式架构不仅改变了代码的组织方式,更从根本上重塑了编…...
GLM-4-9B-Chat-1M惊艳效果:输入50万字小说,精准定位伏笔与人物关系图谱
GLM-4-9B-Chat-1M惊艳效果:输入50万字小说,精准定位伏笔与人物关系图谱 1. 百万长文处理新标杆 想象一下,你手头有一部50万字的网络小说,想要找出所有埋设的伏笔线索,理清复杂的人物关系网。传统方法可能需要花费数天…...
Youtu-Parsing解析古籍与历史档案:助力文化遗产数字化与检索
Youtu-Parsing解析古籍与历史档案:助力文化遗产数字化与检索 你有没有想过,那些躺在博物馆或图书馆深处、纸张泛黄、字迹模糊的古籍和历史档案,如何才能被更多人方便地查阅和研究?过去,这需要研究者花费大量时间&…...
ABAP开发避坑指南:绕过SAP GUI安全弹窗的5种编程方案实测
ABAP开发实战:5种绕过SAP GUI安全弹窗的编程方案深度解析 引言:SAP GUI安全机制的困境与突破 在SAP系统的日常开发与运维中,频繁出现的"系统试图创建文件"安全弹窗堪称ABAP开发者的噩梦。这种设计初衷为保护本地文件安全的机制&…...
工业设计必看:SolidWorks曲面建模中的NURBS核心原理与7个避坑指南(2024版)
工业设计进阶:SolidWorks曲面建模中的NURBS核心原理与高阶实践(2024版) 在汽车外壳的流线型曲面或消费电子产品的有机形态背后,NURBS(非均匀有理B样条)技术始终是工业设计软件的核心引擎。作为SolidWorks等…...
CLAP Zero-Shot Audio Classification Dashboard部署教程:HTTPS反向代理配置(Nginx)保障生产环境访问安全
CLAP Zero-Shot Audio Classification Dashboard部署教程:HTTPS反向代理配置(Nginx)保障生产环境访问安全 1. 为什么需要HTTPS反向代理 当你成功部署了CLAP音频分类应用后,可能会发现直接通过HTTP访问存在一些安全问题。在生产环…...
从‘能工作’到‘优秀’:手把手教你为你的Buck/Boost电路挑选和优化MOSFET驱动
从‘能工作’到‘优秀’:手把手教你为Buck/Boost电路挑选和优化MOSFET驱动 在开关电源设计中,MOSFET的选择和驱动优化往往是决定整体效率的关键因素。许多工程师能够设计出"能工作"的电路,但要达到"优秀"的性能指标&…...
Kubernetes集群管理终极指南:使用kubectx和kubens高效切换上下文与命名空间
Kubernetes集群管理终极指南:使用kubectx和kubens高效切换上下文与命名空间 【免费下载链接】kubectx Faster way to switch between clusters and namespaces in kubectl 项目地址: https://gitcode.com/gh_mirrors/ku/kubectx 在Kubernetes多集群环境中&am…...
