当前位置: 首页 > news >正文

原生小程序如何使用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 的 官网 下载库文件&#xff0c;下哪个版本都可以&#xff0c;后者适用于旧版浏览器&#xff0c;所以我下载的是后者 下载完成后&#xff0c;因为微信小程序打包的限制&#xff0c;我将库文件放到项目的后台系统了&#xff0c;在h5端处理会比在…...

「数据架构」MDM实现失败的主要原因

我经常参与一个组织的MDM程序&#xff0c;当他们在一个失败的项目之后向InfoTrellis请求帮助进行清理&#xff0c;或者开始尝试X&#xff0c;以实现对某些人来说非常困难的目标时。主数据管理实现失败的原因有很多&#xff0c;但是没有一个是由于在这些场景中使用的责备游戏的原…...

【Java基础 1】Java 环境搭建

&#x1f34a; 欢迎加入社区&#xff0c;寒冬更应该抱团学习&#xff1a;Java社区 &#x1f4c6; 最近更新&#xff1a;2023年4月22日 文章目录 1 java发展史及特点1.1 发展史1.2 Java 特点1.2.1 可以做什么&#xff1f;1.2.2 特性 2 Java 跨平台原理2.1 两种核心机制2.2 JVM…...

2023-4-26-C++11新特性之正则表达式

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…...

python接口自动化测试 requests库的基础使用

目录 简单介绍 Get请求 Post请求 其他类型请求 自定义headers和cookies SSL 证书验证 响应内容 获取header 获取cookies 简单介绍 requests库简单易用的HTTP库 Get请求 格式&#xff1a; requests.get(url) 注意&#xff1a;若需要传请求参数&#xff0c;可直接在 …...

Photon AI Translator 和做产品的一些思考

近 4 个月内我一直在做 Apple 平台的产品&#xff0c;虽然从使用量来说「简体中文」用户是占多数&#xff0c;但我一直有做多语言的支持&#xff1a;英语、简体中文和繁体中文。习惯上 Google 翻译的我&#xff0c;基本上在使用 Xcode 过程中也会一直在浏览器开着 Google Trans…...

IPTV系统架构的分析与研究

1 引言   IPTV业务是伴随着宽带互联网的飞速发展而兴起的一项新兴的互联网增值业务,它利用宽带互联网的基础设施&#xff0c;以家用电视机和电脑作为主要终端 &#xff0c;利用网络机顶盒(STB,Set -TopBox) &#xff0c;通过互联网协议来传送电视信号.提供包括 电视节 目在 内…...

workerman开发者必须知道的几个问题

1、windows环境限制 windows系统下workerman单个进程仅支持200个连接。 windows系统下无法使用count参数设置多进程。 windows系统下无法使用status、stop、reload、restart等命令。 windows系统下无法守护进程&#xff0c;cmd窗口关掉后服务即停止。 windows系统下无法在一个…...

golang Gin实现websocket

golang使用 Gin实现 websocket&#xff0c;这里笔者重新搭建一个项目 1、创建项目安装依赖 项目名为 go-gin-websocket 在指定文件夹下&#xff0c;新建项目文件夹 go-gin-websocket 进入项目文件夹&#xff0c;打开cmd窗口&#xff0c;在项目&#xff08;go-gin-websocket&a…...

冯·诺依曼体系结构与初始操作系统

目录 冯诺依曼体系结构 冯诺依曼体系结构图 内存 外存 网卡和磁盘 结构之间运算速度的差异 缓冲区 初始操作系统 概念 操作系统上边与下边分别有什么 从上到下依次顺序解析 用户 用户操作接口 系统调用接口 操作系统四项管理 驱动 硬件 冯诺依曼体系结构 冯诺…...

软件测试之黑盒测试的具体方法详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一.基于需求的设计方法二.等价类三.边界值四.判定表4.1 **关系**4.2 如何设计测试用例4.3 实际案例第一步第二步第三步第四步 五.正交排列5.1 什么是正交表5.2 …...

图形编辑器:历史记录设计

大家好&#xff0c;我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录&#xff0c;做到撤销重做。 其实就是版本号的更替。每个版本保存一个状态。 数据结构 要记录图形编辑器的历史记录&#xff0c;支持撤销重做功能&#xff0c;需要两个栈&#xff1a;撤销&#xff0…...

ubuntu22.04下挂载第二块硬盘

文章目录 一、查看硬盘情况二、找到nvme1n1三、挂载四、修改分区文件 一、查看硬盘情况 首先要查看一下系统识别出来的设备。也就是说&#xff0c;我希望知道&#xff0c;ubuntu到底发现了几块硬盘。用命令&#xff1a;lsblk 显示结果如下&#xff1a; 有两块硬盘&#xff1a…...

举例说明.net中in与out的作用与区别

-----作用 在 .NET 中&#xff0c;in 和 out 是用于泛型类型参数的修饰符&#xff0c;它们用于指定参数类型的协变性和逆变性。 - in 修饰符&#xff1a;表示这个泛型类型参数是协变的。也就是说&#xff0c;in 类型参数可以从较特殊的类型隐式转换为较通用的类型。例如&…...

Java常见的100道面试题(内附答案及代码示例)持续更新

什么是Java程序&#xff1f; Java程序是一组可执行的代码&#xff0c;由Java编译器编译生成&#xff0c;可以在Java虚拟机&#xff08;JVM&#xff09;上运行。 public class HelloWorld {public static void main(String[] args) {System.out.println("Hello, World!&qu…...

策略设计模式知多少

目录 目标 概述 实现 目标 熟悉策略设计模式&#xff0c;了解策略设计模式的使用场景、具体实现。 概述 一、行为设计模式 行为设计模式是设计模式的一种类型。该类型的设计模式关注的重点在于对象的行为&#xff08;通信和交互&#xff09;&#xff0c;而非对象的创建方…...

第三十九章 配置镜像 - 配置 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开始&#xff0c;Google 引入了一套全新的相机框架 Ca…...

阿里云g8i服务器Intel Xeon(Sapphire Rapids) Platinum 8475B

阿里云服务器ECS通用型实例规格族g8i采用2.7 GHz主频的Intel Xeon(Sapphire Rapids) Platinum 8475B处理器&#xff0c;3.2 GHz睿频&#xff0c;g8i实例采用阿里云全新CIPU架构&#xff0c;可提供稳定的算力输出、更强劲的I/O引擎以及芯片级的安全加固。阿里云百科分享阿里云服…...

设计模式——组件协作模式之观察者模式

文章目录 前言一、“组件协作” 模式二、Observer 观察者模式1、动机2、模式定义3、伪代码示例①、第一种方案&#xff0c;最朴素的方式②、第二种方案&#xff0c;重构使得遵循DIP原则&#xff1a;③、进一步的小优化&#xff1a;④、修改使得支持多个观察者&#xff1a; 4、结…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...