WEB:探索开源PDF.js技术应用

1、简述

PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库,用于在浏览器中渲染 PDF 文档。它的目标是提供一个纯粹的前端解决方案,摆脱了依赖插件或外部程序的束缚,使得在任何支持 JavaScript 的浏览器中都可以轻松地显示 PDF 文档。

2、技术特点

  • PDF.js 利用 HTML5 标准中的 元素进行渲染,同时使用 Web Workers 实现多线程处理,确保渲染过程不会阻塞主线程,提高了整体性能。

  • 兼容性
    由于 PDF.js 仅依赖于标准的 Web 技术,因此可以在主流的现代浏览器中运行,包括 Chrome、Firefox、Safari 等。这种高度的兼容性为开发者提供了更大的灵活性。

  • 自适应视图
    PDF.js 支持自适应视图,可以根据用户设备的屏幕大小和分辨率自动调整 PDF 文档的显示,提供更好的用户体验。

  • 开源社区支持
    作为一个开源项目,PDF.js 受到了全球开发者社区的关注和支持。这意味着你可以从庞大的开源社区中获取反馈、贡献代码以及解决问题,加速项目的发展和改进。

3、下载

PDF.js 的前端渲染方式消除了对浏览器插件的依赖,用户可以在不安装任何额外插件的情况下直接在浏览器中查看和操作 PDF 文档。
通过官网:https://mozilla.github.io/pdf.js/下载对应的版本:在这里插入图片描述
或者通过github下载指定的版本:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

4、应用

PDF.js 的社区非常活跃,开发者可以在 GitHub 上提交问题、提出建议,也可以参与讨论和贡献代码。这种开放的合作方式使得 PDF.js 不断得到改进和更新。

4.1 本地打开

通过当前环境安装nodejs环境来实现打开下载的PDF.js文件,首先通过安装Anywhere随启随用的静态服务器,让当前下载文件目录当作服务器的根目录。
在这里插入图片描述

安装nodejs后,我们通过指令npm来安装Anywhere:

npm install anywhere -g

安装完成后,直接在web同层启动CMD指令直接执行:anywhere
在这里插入图片描述

直接访问:http://192.168.2.163:8000/web/viewer.html

在这里插入图片描述

4.2 PDF.js库
  • 引入 PDF.js 库
    首先,在项目中引入 PDF.js 库的 JavaScript 文件,可以通过直接下载或使用 CDN 进行引入。
<script src="path/to/pdf.js"></script>
  • 创建容器
    在 HTML 文件中创建一个容器,用于显示 PDF 文档。
<div id="pdf-container"></div>
  • 初始化 PDF.js
    使用 JavaScript 代码初始化 PDF.js,指定 PDF 文档的路径和容器。
var pdfPath = 'path/to/example.pdf';
var container = document.getElementById('pdf-container');
PDFJS.getDocument(pdfPath).then(function (pdfDocument) {// 处理 PDF 文档
});
  • 渲染页面
    通过 PDF.js 提供的 API,渲染 PDF 文档的指定页面到容器中。
var pageNumber = 1;
pdfDocument.getPage(pageNumber).then(function (pdfPage) {var scale = 1.5;var viewport = pdfPage.getViewport({ scale: scale });var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;container.appendChild(canvas);pdfPage.render({canvasContext: context,viewport: viewport});
});
  • 获取签名数据
    我们可以在pdf.worker.js里面来获取当前签名的数据,通过当前数据解析的Sig类型来获取,保存在自定义signatures对象中:
case "Sig"://获取签名的数据集if(pageNumber){let _signatures=pdfManager.signatures;if(!_signatures){_signatures={};}let _signature={};_signature.rect=parameters.dict._map.Rect;_signature.name="";_signature.pageNumber = pageNumber;_signatures[parameters.dict._map.T.replace("þÿ","").replace(/\u0000/g,"")]=_signature;pdfManager.signatures=_signatures;}
return new SignatureWidgetAnnotation(parameters);

5、结语

PDF.js 作为一个开源的前端 PDF 渲染库,通过其基于标准技术、兼容性、自适应视图和活跃的社区支持等优势,成为开发者在项目中处理 PDF 文档的理想选择。通过上述简单的使用示例,我们可以看到 PDF.js 提供了简洁而强大的 API,使得在浏览器中实现高效的 PDF 渲染变得轻而易举。如果你正在寻找一个可靠的前端 PDF 渲染解决方案,不妨给 PDF.js 一个机会,探索其在项目中的无限可能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言中指针变量如何使用

一、指针变量的定义与声明 1.1 定义 指针变量是用来存储另一个变量的内存地址的变量。在C语言中&#xff0c;指针变量的类型是指向某个类型的指针。例如&#xff0c;int *p; 表示一个整型指针变量p。 1.2 声明 指针变量的声明分为两种形式&#xff0c;一种是直接声明&#…

linux-磁盘扩容 -- 小黑日常超细教程

hi~ 这次小黑带来的是linux磁盘扩容超细教学&#xff0c;按照步骤来&#xff0c;超容易~ 目录 模拟实验对象&#xff1a; 1、查看磁盘分区和挂载点 2、查看新增磁盘 3、将新磁盘格式化&#xff0c;建立新分区 4、查看vg卷组信息 5、分区添加卷组 6、扩容 问题&…

单测结果不稳定的终极解决方案(Maven单测参数调优)

一、前言 近期&#xff0c;在公司平台执行单测任务时&#xff0c;我发现到一个显著的问题&#xff1a;我们的一个应用&#xff0c;在公司平台上执行单测时&#xff0c;即使是相同的代码&#xff0c;每次的执行结果&#xff08;包括行覆盖率以及单测通过率&#xff09;都存在差…

Android kotlin build.gradle.kts配置

1. 添加 maven 仓库 1. 1. settings配置 1. 1.1. settings.gradle repositories {maven {url https://maven.aliyun.com/repository/public/}mavenCentral() }1. 1.2. settings.gradle.kts repositories {maven {setUrl("https://maven.aliyun.com/repository/public/…

《Redis实战》学习笔记

特点 &#xff1a;1、是一个高性能的key/value内存型数据库 2、支持丰富的数据类型(string,List,Set,ZSet,Hash) 3、支持持久化 内存数据&#xff0c; 可以持久化到硬盘中 4、单进程&#xff0c;单线程 效率高 redis实现分布式锁 一、redis的相关指令 1、flushDB 清空当前…

LDD学习笔记 -- Linux设备驱动概述

LDD学习笔记 -- Linux设备驱动概述 概述分类字符设备驱动块设备驱动 设备文件 概述 设备驱动&#xff1a;配置和管理设备的一段代码。 负责与硬件设备进行交互&#xff0c;并导出应用程序和其他内核模块可以用来访问设备的接口。 该代码能够通过向设备发送数据来配置设备&am…

Flink实时电商数仓之旁路缓存

撤回流的处理 撤回流是指流式处理过程中&#xff0c;两表join过程中的数据是一条一条跑过来的&#xff0c;即原本可以join到一起的数据在刚开始可能并没有join上。 撤回流的格式&#xff1a; 解决方案 定时器&#xff1a;使用定时器定时10s&#xff08;数据最大的时间差值&am…

7.14解数独(LC37-H)

算法&#xff1a; 二维递归&#xff08;递归时需要两层for循环&#xff09; 一个for循环放行 另一个for循环放列 画树&#xff1a; 因为这个树形结构太大了&#xff0c;我抽取一部分&#xff0c;如图所示&#xff1a; 回溯三部曲&#xff1a; 1.确定函数参数和返回值 返…

在Gradle工程中使用checkstyle来规范你的项目

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列专栏目录 [Java项…

CSS transition详解

文章目录 属性transition-propertytransition-durationtransition-timing-functiontransition-delaytransition 简写属性 方法Element&#xff1a;transitionrun 事件Element&#xff1a;transitionstart 事件Element&#xff1a;transitionend 事件Element&#xff1a;transit…

音频DAC,ADC,CODEC高性能立体声

想要让模拟信号和数字信号顺利“交往”&#xff0c;就需要一座像“鹊桥”一样的中介&#xff0c;将两种不同的语言转变成统一的语言&#xff0c;消除无语言障碍。这座鹊桥就是转换器芯片&#xff0c;也就是ADC芯片。ADC芯片的全称是Analog-to-Digital Converter, 即模拟数字转换…

【白盒测试】逻辑覆盖和路径测试的设计方法

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

互联网演进历程:从“全球等待”到“全球智慧”的技术革新与商业变革

文章目录 一、导言二、World Wide Wait (全球等待)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 三、World Wide Web (万维网)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 四、World Wide Wisdom (全球智慧)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 五、…

Vue 3.4 正式版发布,带来多项更新

12 月 28 日,Vue 3.4 正式版发布,代号为“🏀 Slam Dunk”,即灌篮高手。据尤大接收,这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍,显著提升了整体性能。 此外,响应性系统也经过了重构,使得 effect 触发更为精…

Java编程中的IO模型详解:BIO,NIO,AIO的区别与实际应用场景分析

IO模型 IO模型就是说用什么样的通道进行数据的发送和接收&#xff0c;Java 共支持3种网络编程IO 模式&#xff1a;BIO,NIO,AIO BIO(Blocking lO) 同步阻塞模型&#xff0c; 一个客户端连接对应一个处理线程 代码示例&#xff1a; package com.tuling.bio; import java.io.…

SQL BETWEEN 操作符

BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。 SQL BETWEEN 语法 SELECT column1, column2, ... FROM table_name WHERE column BETWEEN value1 AND value2; 参数说明&#xff1a; column1, column2, ...&#xff1a;要选择的字段名…

DeepL翻译器,一直想使用怎么办?

作为一个独立开发者&#xff0c;将应用程序翻译到不同语言是个让我很头大的事情。请专业人员翻译太贵无法承受&#xff0c;谷歌翻译质量太差时常词不达意。 如何使用 DeepL 使用起来很直观&#xff0c;打开此网页粘贴要翻译的内容即可。它也支持 macOS 和 PC 端。 这里开我们开…

LinuxShell

一、 新建用户 在Linux上新建一个用户并赋予超级用户权限&#xff0c;建立家目录并设置默认shell为bash&#xff0c;并设置Linux在输入sudo密码时显示星号。请提交全部命令及输出截图&#xff08;表明完成需求即可&#xff09;。 1.sudo useradd -m ymhs(用户名) 增加用户 2.su…

Transformer:Attention机制、前馈神经网络、编码器与解码器

主要介绍Transformer的一些工作原理与优势。 文章目录 Transformer中的Attention机制 一、引言 二、Transformer中的Attention机制 1. 背景介绍 2. 工作原理 3. 优势分析 Transformer中的前馈神经网络 一、引言 二、神经网络的基本概念 三、前馈神经网络 四、Transformer中的前…

SpingBoot的项目实战--模拟电商【5.沙箱支付】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringBoot电商项目的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. 沙箱支付是什么 二.Sp…