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

PDF.js介绍以及使用

news 文章来源：https://blog.csdn.net/weixin_39934453/article/details/135131897 2024/11/16 6:52:34

一、PDF.js是什么

PDF.js是一个JavaScript库，可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式，以便在浏览器上进行展示和交互。

PDF.js的主要功能包括：

  1. 在浏览器中显示PDF：PDF.js使用HTML5的canvas元素来呈现PDF页面，使得用户可以在浏览器中直接查看PDF文件，而无需依赖外部的PDF阅读器插件。
  2. 支持基本的浏览功能：PDF.js提供了一套用户界面，包括缩放、滚动、翻页等浏览功能，使用户能够方便地导航和浏览PDF文件。
  3. 支持文本搜索：PDF.js可以对PDF文件进行文本搜索，用户可以输入关键字来查找并定位到相应的内容。
  4. 支持页面导航：PDF.js提供了页面导航功能，用户可以跳转到特定的页面，或者在查看多页PDF时进行翻页。
  5. 支持缩放和旋转：PDF.js允许用户调整PDF页面的缩放级别，并可以旋转页面以适应不同的阅读需求。
  6. 支持批注和标记：PDF.js可以让用户在PDF文件中进行批注和标记，例如划线、画框、添加注释等，以便在阅读或共享时进行交流和标记重点。

总的来说，PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案，使用户能够直接在浏览器中浏览和使用PDF，而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。

二、PDF.js使用

官网
https://mozilla.github.io/pdf.js/
简单显示案例

<!DOCTYPE html>
<html>
<head><title>PDF.js Example</title><style>#pdf-container {width: 800px;height: 600px;}</style>
</head>
<body>
<div id="pdf-container"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>
<script>// 指定工作线程脚本的路径pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js';// 获取容器元素var container = document.getElementById('pdf-container');// 加载PDF文档pdfjsLib.getDocument('./2.pdf').promise.then(function(pdf) {// 获取第一页pdf.getPage(1).then(function(page) {var scale = 1.5;var viewport = page.getViewport({ scale: scale });// 创建一个<canvas>元素用于显示PDF页面var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;// 将PDF页面渲染到<canvas>元素中page.render({canvasContext: context,viewport: viewport});// 将<canvas>元素添加到容器中container.appendChild(canvas);});});
</script>
</body>
</html>

这段代码是使用PDF.js库在浏览器中显示PDF文件的示例。如果你想要修改代码以实现一些功能，可以参考以下示例修改：

  1. 添加翻页功能：
var currentPage = 1;
function renderPage(pageNumber) {container.innerHTML = ''; // 清空容器pdf.getPage(pageNumber).then(function(page) {var scale = 1.5;var viewport = page.getViewport({ scale: scale });var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;page.render({canvasContext: context,viewport: viewport});container.appendChild(canvas);currentPage = pageNumber;});
}// 监听翻页按钮点击事件
document.getElementById('prev-btn').addEventListener('click', function() {if (currentPage > 1) {renderPage(currentPage - 1);}
});document.getElementById('next-btn').addEventListener('click', function() {if (currentPage < pdf.numPages) {renderPage(currentPage + 1);}
});

在HTML中添加两个按钮：

<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>

这样就可以通过点击按钮来翻页了。

  1. 文本搜索功能：
function search(text) {var searchParams = {query: text,highlightAll: true};pdf.getPage(currentPage).then(function(page) {return page.getTextContent();}).then(function(textContent) {pdfjsLib.renderTextLayer({textContent: textContent,container: container,viewport: page.getViewport({ scale: scale }),textDivs: []}, searchParams);});
}// 监听搜索表单提交事件
document.getElementById('search-form').addEventListener('submit', function(event) {event.preventDefault();var searchText = document.getElementById('search-input').value;search(searchText);
});

在HTML中添加搜索表单：

<form id="search-form"><input id="search-input" type="text" placeholder="Search"><button type="submit">Search</button>
</form>

这样就可以在表单中输入关键字进行文本搜索了。

请注意，以上只是示例代码，实际实现中可能需要根据具体需求进行调整和完善。同时，需要确保PDF.js和相关依赖的正确引入，以及正确指定PDF文件的路径和文件名。

相关文章：

PDF.js介绍以及使用

一、PDF.js是什么 PDF.js是一个JavaScript库&#xff0c;可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式&#xff0c;以便在浏览器上进行展示和交互。 PDF.js的主要功能包括&#xff1a; 在浏览器中显示PDF&#xff1a;PDF.js使用HTML5的…...

编程日记 2023/12/23 9:17:04

经常使用的排序算法

一、直接插入排序 #include <stdio.h>void insert_sort(int arr[], int n){int i, j, tmp;for (i 1; i < n; i){tmp arr[i];j i - 1;while (j > 0 && arr[j] > tmp){ // 将要插入的元素与数组中的元素比较&#xff08;从后向前比&#xff09;arr[j …...

编程日记 2023/12/23 9:13:01

msyql 24day 数据库主从 主从复制 读写分离 master slave 有数据如何增加

目录 环境介绍读写分离纵向扩展横向扩展 数据库主从准备环境主库环境(master)从库配置(slave)状态分析重新配置问题分析 报错解决从库验证 有数据的情况下 去做主从清理环境环境准备数据库中的锁的机制主库配置从库配置最后给主库解锁常见错误 环境介绍 将一个数据库的数据 复…...

编程日记 2023/12/23 9:12:00

使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理

背景 在上一篇文章中&#xff0c;我们已经了解到华为即将发布的鸿蒙操作系统纯血版本——鸿蒙 Next&#xff0c;以及各个互联网厂商开展鸿蒙应用开发的消息。其中&#xff0c;Taro作为一个重要的前端开发框架&#xff0c;也积极适配鸿蒙的新一代语言框架 —— ArkTS。 本文将…...

编程日记 2023/12/23 9:10:59

Linux下 自定义多线程并发快速压缩解压缩脚本

文章目录 自定义多线程压缩解压缩脚本使用 Linux下 自定义多线程并发快速压缩解压缩脚本 Linux下常用的tar工具无法支持并行 压缩和解压&#xff0c;对于大量小文件的解压缩&#xff0c;可借助pigz工具实现多线程并行工作&#xff0c;实现更为高效的压缩和解压缩。 自定义多线…...

编程日记 2023/12/23 9:08:58

ubuntu20.04下安装pcl_ubuntu安装pcl

pcl点云数据库&#xff0c;用来进行3D信息的获取与处理&#xff0c;和opencv相比较&#xff0c;opencv是用来处理二维信息&#xff0c;他是学术界与工业界针对点云最全的库&#xff0c;且网络上相关的资料很多。以下是pcl的安装步骤以及遇到的问题。 提前说明&#xff0c;本人…...

编程日记 2023/12/23 9:04:53

阿里云常用配置：日志采集、OSS、RAM 权限策略

文章目录 引言I 日志采集1.1 具体查询语法1.2 查询示例1.3 设置token时间(登录过期时间)II OSS2.1 设置防盗链2.2 验证Referer防盗链是否生效III 通义灵码 (智能编码)IV RAM 权限策略4.1 短信策略4.2 内容风险检测引言 SLS I 日志采集...

编程日记 2023/12/23 8:59:48

回顾丨2023 SpeechHome 第三届语音技术研讨会

下面是整体会议的内容回顾&#xff1a; 18日线上直播回顾 18日上午9:30&#xff0c;AISHELL & SpeechHome CEO卜辉宣布研讨会开始&#xff0c;并简要介绍本次研讨会的筹备情况以及报告内容。随后&#xff0c;CCF语音对话与听觉专委会副主任、清华大学教授郑方&#xff0c…...

编程日记 2023/12/23 8:55:45

【flink】状态清理策略(TTL)

flink的keyed state是有有效期(TTL)的&#xff0c;使用和说明在官网描述的篇幅也比较多&#xff0c;对于三种清理策略没有进行横向对比得很清晰。 全量快照清理(FULL_STATE_SCAN_SNAPSHOT)增量清理(INCREMENTAL_CLEANUP)rocksdb压缩清理(ROCKSDB_COMPACTION_FILTER) 注意&…...

编程日记 2023/12/23 8:54:44

4. 行为模式 - 中介者模式

亦称&#xff1a; 调解人、控制器、Intermediary、Controller、Mediator 意图 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 问题 假如你有一个创建…...

编程日记 2023/12/23 8:50:41

2015年第四届数学建模国际赛小美赛A题飞机上的细长座椅解题全过程文档及程序

2015年第四届数学建模国际赛小美赛 A题 飞机上的细长座椅 原题再现&#xff1a; 航空公司座位是指在旅途中乘客可以乘坐的座位。一些航空公司现在推出了新的经济舱“超薄”座位。这些座椅除了重量较轻外&#xff0c;理论上还允许航空公司在不显著影响乘客舒适度的情况下增加运…...

编程日记 2023/12/23 8:46:37

机器学习笔记（二）使用paddlepaddle，再探波士顿房价预测

目标 用paddlepaddle来重写之前那个手写的梯度下降方案&#xff0c;简化内容 流程 实际上就做了几个事&#xff1a; 数据准备&#xff1a;将一个批次的数据先转换成nparray格式&#xff0c;再转换成Tensor格式前向计算&#xff1a;将一个批次的样本数据灌入网络中&#xff…...

编程日记 2023/12/23 8:45:36

【Linux】权限篇（二）

权限目录 1. 前言2. 权限2.1 修改权限2.2 有无权限的对比2.3 另外一个修改权限的方法2.3.1 更改用户角色2.3.2 修改文件权限属性 3. 第一个属性列4. 目录权限5. 默认权限 1. 前言 在之前的一篇博客中分享了关于权限的一些知识&#xff0c;这次紧接上次的进行&#xff0c;有需要…...

编程日记 2023/12/23 8:41:32

reduce累加器的应用

有如下json数据&#xff0c;需要统计Status的值为0和1的数量 const data {"code": "001","results": [{"Status": "0",},{"Status": "0",},{"Status": "1",}] }方法一:用reduce方…...

编程日记 2023/12/23 8:39:31

助力硬件测试工程师之EMC项目测试。

1&#xff1a;更新该系列的目的 接下来的一个月内&#xff0c;将更新硬件测试工程师的其中测试项目--EMC项目&#xff0c;后续将会出安规等项目&#xff0c;助力测试工程师的学习。 2&#xff1a;如何高效率的展现项目的基础以及一些细节知识点 通过思维导图以及标准的规定进行…...

编程日记 2023/12/23 8:33:25

Github 2023-12-23 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-23统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目6C项目2C项目1Jupyter Notebook项目1HTML项目1Go项目1非开发语言项目1 免费API集体清单 创建周期…...

编程日记 2023/12/23 8:32:24

Quartz.net 正则表达式触发器

1、创建项目 项目类型控制台应用程序&#xff0c;.Net Framework框架版本 4.7.2 2、引入框架 NuGet\Install-Package Quartz -Version 3.8.0 3、创建Job 自定义Job实现接口IJob&#xff0c;在Execute方法实现定时逻辑&#xff0c; using Quartz; using System; using Sys…...

编程日记 2023/12/23 8:29:21

【已解决】修改了网站的class样式name值，会影响SEO，搜索引擎抓取网站及排名吗？

问题&#xff1a; 修改了网站的class样式name值&#xff0c;会影响搜索引擎抓取网站及排名吗&#xff1f; 解答&#xff1a; 如果你仅仅修改了网站class样式的名称&#xff0c;而没有改变网站的结构和内容&#xff0c;那么搜索引擎通常不会因此而影响它对网站的抓取和排名。但…...

编程日记 2023/12/23 8:28:20

微信小程序开发系列-02注册小程序

上一篇文章&#xff0c;创建了一个最小的小程序&#xff0c;但是&#xff0c;还有3个疑问没有弄清楚&#xff0c;还是基于demo1工程&#xff0c;这篇文章继续探索。 当前的目录结构是否是完备的呢&#xff1f;&#xff08;虽然小程序可以运行起来&#xff09;app.js文件内容还…...

编程日记 2023/12/23 8:27:20

安装 PyCharm 2021.1 保姆级教程

作者&#xff1a;billy 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 前言 目前能下载到的最新版本是 PyCharm 2021.1。 请注意对应 Python 的版本&#xff1a; Python 2: 2.7Python 3: >3.6, <3.11…...

编程日记 2023/12/23 8:24:17

浏览器 cookie 的原理（详）

目录 1&#xff0c;cookie 的出现2&#xff0c;cookie 的组成浏览器自动发送 cookie 的条件 3&#xff0c;设置 cookie3.1&#xff0c;服务端设置3.1&#xff0c;客户端设置3.3&#xff0c;删除 cookie 4&#xff0c;使用流程总结 整理和测试花了很大时间&#xff0c;如果对你有…...

编程日记 2023/12/23 8:21:14

StringBuilder和StringBuffer区别是什么？

想象一下&#xff0c;你在写信&#xff0c;但是你需要不断地添加新的内容或者修改一些词句。在编程中&#xff0c;当你需要这样操作字符串时&#xff0c;就可以用StringBuffer或StringBuilder。 StringBuffer StringBuffer就像是一个多人协作写作的工具。如果你和你的朋友们一…...

编程日记 2023/12/23 8:19:13

【数据分析】数据指标的分类及应用场景

数据分析之数据指标的分类 数据分析离不开对关键指标的分析与跟踪&#xff0c;这些指标通常与具体的业务直接相关。好的指标能够促进业务的健康发展&#xff0c;因为指标与业务目标是一致的&#xff0c;此时指标就能反映业务变化&#xff0c;指标发生变化&#xff0c;行动也发…...

编程日记 2023/12/23 8:18:12

首涂第二十八套_新版海螺M3多功能苹果CMSv10自适应全屏高端模板

首涂第二十八套_新版海螺M3多功能苹果cmsv10自适应全屏高端模板 多功能苹果cmsv10自适应全屏高端模板开源授权版 这是一款带“主题管理系统”的模板。这是一款好模板。 花大价钱收购了海螺这两个模板的版权。官方正品&#xff0c;非盗版。关闭域名授权 后台自定义菜单 请把…...

编程日记 2023/12/23 8:16:09

MatGPT - 访问 OpenAI™ ChatGPT API 的 MATLAB® 应用程序

系列文章目录 前言 MatGPT 是一款 MATLAB 应用程序&#xff0c;可让您轻松访问 OpenAI 的 ChatGPT API。使用该应用程序&#xff0c;您可以加载特定用例的提示列表&#xff0c;并轻松参与对话。如果您是 ChatGPT 和提示工程方面的新手&#xff0c;MatGPT 不失为一个学习的好方…...

编程日记 2023/12/23 8:14:07

Tomcat转SpringBoot、tomcat升级到springboot、springmvc改造springboot

Tomcat转SpringBoot、tomcat升级到springboot、springmvc改造springboot 起因&#xff1a;我接手tomcat-springmvc-hibernate项目&#xff0c;使用tomcat时问题不大。自从信创开始&#xff0c;部分市场使用国产中间件&#xff0c;例如第一次听说的宝兰德、东方通&#xff0c;还…...

编程日记 2023/12/23 8:12:06

浅述无人机技术在地质灾害应急救援场景中的应用

12月18日23时&#xff0c;甘肃临夏州积石山县发生6.2级地震&#xff0c;震源深度10千米&#xff0c;灾区电力、通信受到影响。地震发生后&#xff0c;无人机技术也火速应用在灾区的应急抢险中。目前&#xff0c;根据受灾地区实际情况&#xff0c;翼龙-2H应急救灾型无人机已出动…...

编程日记 2023/12/23 8:11:05

js-cookie的使用以及存储token安全的注意要点

js-cookie的使用以及存储token安全的注意要点 npm 安装 npm i js-cookie -S // https://www.npmjs.com/package/js-cookie引入使用 import Cookies from js-cookie获取 Cookies.get(token); // 读取token Cookies.get() // 读取所有可见的 Cookie > { token: value }设置…...

编程日记 2023/12/23 8:10:04

Android 网络状态判断

1、获取网络信息&#xff0c;首先需要获取权限 <uses-permission android:name"android.permission.INTERNET" /> <uses-permission android:name"android.permission.ACCESS_NETWORK_STATE" /> 2.1我们通过ConnectivityManager可以获取状态…...

编程日记 2023/12/23 8:06:59

管理类联考——数学——真题篇——按知识分类——代数——数列

【等差数列 ⟹ \Longrightarrow ⟹ 通项公式&#xff1a; a n a 1 ( n − 1 ) d a m ( n − m ) d n d a 1 − d A n B a_n a_1(n-1)d a_m(n-m)dnda_1-dAnB an​a1​(n−1)dam​(n−m)dnda1​−dAnB ⟹ \Longrightarrow ⟹ A d &#xff0c; B a 1 − d Ad&#x…...

编程日记 2023/12/23 8:05:59

广州网站制作托管/seo中文全称是什么

300W逆变电源资料 pcb&#xff0c;原理图 300W逆变电源资料 pcb&#xff0c;原理图 id658271275104&...

编程日记 2024/11/16 5:57:23

wordpress 快速填写qq/百度关键词优化和百度推广

一、示例概述本篇博客的示例比较简单&#xff0c;其实就是使用Runtime的方法交换来实现AOP面向切面编程。下方这两个文件就是我们本篇博客所涉及的核心文件。TestClass顾名思义就是我们的测试类&#xff0c;而TestClassLogging就是TestClass的切片&#xff0c;TestClassLogging…...

编程日记 2024/11/16 2:35:40

炫酷网站界面设计/百度推广培训

有任何的书写错误、排版错误、概念错误等&#xff0c;希望大家包含指正。 在阅读本篇之前建议先学习&#xff1a; RNN 讲解 LSTM 讲解 3. GRU 3.1. 网络结构 GRU 是循环神经网络的一种&#xff0c;和 LSTM 一样&#xff0c;是为了解决长期依赖问题。GRU 单元结构如下。 图 1…...

编程日记 2024/11/16 0:53:17

重庆营销网站建设公司排名/营销型网站更受用户欢迎的原因是

ESP32 寻迹模块测试寻迹模块测试所选设备ESP32使用PWM示例代码寻迹模块测试 所选设备 ’ESP32 引脚说明16需要先拉低在拉高&#xff0c;才能驱动电机13PWM控制A电机18PWM控制B电机4A115A217B15B2 PWM控制电机方法参考——PWM如何控制直流电机 驱动芯片TB6612FNG ESP32使…...

编程日记 2024/11/16 0:06:50

百度网站免费电话/网站排名软件推荐

Fun 0 直接获取日期再次计算时间戳 function fun00(){let today new Date();return new Date(today.toDateString()).getTime();} 复制代码function fun01(){let today new Date();return new Date(today.getFullYear()/today.getMonth()1/today.getDate()).getTime();} 复制…...

编程日记 2024/11/15 23:09:20

哪个网站可以做优惠券/推客平台

一、Collection&#xff1a;存放独立元素 Collection中的接口都是可选操作&#xff0c;其实现类 并不一定实现了其所有接口&#xff0c;这是为了防止“接口爆炸”。最常见的Unsupported Operation 都源自于背后由固定尺寸的数据结构支持的容器&#xff0c;比如使用ArrayList.as…...

编程日记 2024/11/15 21:49:39