PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

最近新项目需要处理 PDF,研究了 PDf.js 之后觉得很不错,于是写篇文章推荐给大家。

PDF.js 的功能和它的名字一样简单,是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着,没错,就是那个开发了火狐浏览器的 Mozilla。所以 pdf.js 也内置在 Firefox 的 19+ 版本中,也是火狐浏览器的默认 PDF 处理工具。

一般来说,要查看 PDF 文档,我们需要一个 PDF 阅读器软件,而通过 PDF.js 可以在浏览器中直接显示和处理 PDF 文档,无论是在线浏览、存档或者其他基于 PDF 的功能都可以实现。

PDF.js 项目主页

  • 功能强大,内置了很多实用的 api,几乎可以对 PDF 文件“为所欲为”;
  • 兼容性超好,不仅支持现代浏览器,对于旧版本的浏览器也有很好的支持;
  • 易于上手,官方也提供了很多代码例子。

如果只是为什么显示 PDF 文档,其实大部分情况下浏览器都支持直接打开 PDF,之前碰到要显示 PDF 的需求,都是直接在浏览器新标签打开。

在浏览器中渲染 PDF

不过就在上周,我接到了一个需求,要在网页上支持导入 PDF 文件,转化成图片保存到后端,并且还要提取 PDF 文档中的文字。于是我就开始研究 PDF.js ,了解之后发现这个工具库非常强大,完全可以满足我的需求,那些在线转换 PDF 的工具实际上都是基于 PDF.js 开发的。

我要处理的文档有一部分是发票,其实里面的文字并不是图片,而是可以选择的,这种类型的文档通过 PDF.js 甚至可以直接获取文字的内容,OCR 识别的过程都免了,实在太棒了。

要开始使用 PDF.js ,可以直接从项目下载源码,然后在页面中引入 pdf.js ,就可以按照代码例子那些来使用了。

官方文档

我的实现方式

我是在 Vue 项目中使用,所以我选择用 npm 安装的方式:

然后在 Vue 页面中引入 PDF.js,注意这里的引入方式,需要在包名后加上 /webpack ,否则会报错,原因我也没有去深入排查。

上面这段代码就是我项目 demo 中的一部分,可以实现读取 PDF 文档中的页面和文字,代码的末尾把第一页渲染到了 canvas 中,想要转成图片,只要把 canvas 中的内容转成 PNG 图片即可,区区十来行代码,非常简单。

更多建议

除了提取文章和转成图片,PDF.js 还很多强大的功能,比如可以实现页面导航,预览时加入缩放、滚动、旋转和手写等注释以及实现打印、另存为等操作。

还有些付费软件的功能是压缩 PDF 文档,PDF.js 也可以压缩处理超大型的 PDF 文档,技术原理是把文档中没有使用的结构、元素和对象删除,大大简化文档,从而起到压缩的效果。

总之,想要在项目处理 PDF,PDF.js 是首选,并且目前没有看到类似好用并且强大的 JS 库,反而很多 PDF 工具都是基于 PDF.js 二次封装的。

Mozilla 组织本身是一个非营利性组织,成立以来一直致力于推动浏览器的良好发展,PDF.js 也不例外,是一个免费开源的项目,源码基于 Apache 2.0 许可托管在 Github 上,任何人都可以免费下载来使用,用在商业项目也完全没问题。

原文链接:https://www.thosefree.com/pdfjs

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

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

相关文章

RabbitMQ安装和使用

简介 RabbitMQ是一套开源(MPL)的消息队列服务软件,是由LShift提供的一个Advanced Message Queuing Protocol (AMQP) 的开源实现,由以高性能、健壮以及可伸缩性出名的Erlang写成。所有主要的编程语言均有与代理接口通讯的客户端库…

SQL Server中数据表的增删查改

文章目录 一、增二、查三、改四、删除 一、增 进行增删查改的前提需要在指定数据库中创建数据表,对这块不大理解的可以先看看前面几期文章: 创建数据库 创建数据表 use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,Stu…

HarmonyOS【应用服务开发】在模块中添加Ability

Ability是应用/服务所具备的能力的抽象,一个Module可以包含一个或多个Ability。应用/服务先后提供了两种应用模型: FA(Feature Ability)模型: API 7开始支持的模型,已经不再主推。Stage模型:AP…

C# new Thread和Task.Run,多线程(Thread和Task)

一、开启多线程-new Thread的使用 示例一 Thread thread25yi new Thread(new ThreadStart(obj.MethodTimer1)); thread25yi.Start(); void MethodTimer1() { while (true) { Console.WriteLine(DateTime.Now.ToString() "_" thread25yi.CurrentThread.Managed…

杂记 | 在Linux上使用Docker-compose安装单机版Milvus向量数据库并配置访问控制和可视化面板(Attu)

文章目录 01 Milvus向量数据库简介02 安装前的准备03 安装3.1 创建milvus工作目录3.2 下载并编辑docker-compose.yml3.3 下载milvus.yml文件3.4 启动milvus 04 访问可视化面板并修改密码 01 Milvus向量数据库简介 Milvus是一款开源的向量数据库,它专为AI应用设计&a…

Docker(三)使用 Docker 镜像:从仓库获取镜像;管理本地主机上的镜像;介绍镜像实现的基本原理

作者主页: 正函数的个人主页 文章收录专栏: Docker 欢迎大家点赞 👍 收藏 ⭐ 加关注哦! 使用 Docker 镜像 在之前的介绍中,我们知道镜像是 Docker 的三大组件之一。 Docker 运行容器前需要本地存在对应的镜像&#x…

IaC基础设施即代码:Terraform 使用 dynamic动态内联块 创建docker资源

目录 一、实验 1.环境 2.Terraform查看版本 3.Linux主机安装Docker 4.Terraform使用本地编译(In-house)的Providers 5.Docker-CE 开启远程API 6. Linux主机拉取镜像 7.Terraform 使用 dynamic动态内联块 创建资源 二、问题 1.Terraform 计划资源…

精品基于Uniapp+springboot校园学校趣事管理系统app

《[含文档PPT源码等]精品基于Uniappspringboot趣事管理系统app》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功! 软件开发环境及开发工具: 开发语言:Java 后台框架:springboot、ssm 安卓…

Unity vs Godot :哪个游戏引擎更适合你?

Unity vs Godot :哪个游戏引擎更适合你? 游戏引擎的选择对开发过程和最终产品质量有着重大影响。近年来,Godot和Unity这两款引擎受到广泛关注。本文将从多个维度对两者进行比较,以期为开发者提供正确的选择建议。 Godot和Unity都有…

Backtrader 文档学习-Indicators混合时间框架

Backtrader 文档学习-Indicators混合时间周期 1.不同时间周期 如果数据源在Cerebro引擎中具有不同的时间范围和不同的长度,指示器将会终止。 比如:data0是日线,data1是月线 。 pivotpoint btind.PivotPoint(self.data1) sellsignal self…

IMDB电影评论的情感分析——paddle

项目地址:IMDB电影评论的情感分析 - 飞桨AI Studio星河社区 (baidu.com) 1. 实验介绍 1.1 实验目的 理解并掌握循环神经网络的基础知识点,包括模型的时序结构、模型的前向传播、反向传播等掌握长短时记忆网络LSTM和门控循环单元网络GRU的设计原理熟悉如…

Halcon基于形变的模板匹配

Halcon基于形变的模板匹配 形变分为两种,一种是基于目标局部的形变,另一种是由于透视关系而产生的形变。基于形变的模板匹配也是一种基于形状的匹配方法,但不同的是,其返回结果中不仅包括轻微形变的形状.形变的位置和参数&#x…

Node.js基础知识点(五)- http

一.request 请求事件处理函数 var http require(http)var server http.createServer() request 请求事件处理函数,需要接收两个参数: Request 请求对象 请求对象可以用来获取客户端的一些请求信息,例如请求路径 Response 响应对象 响应对…

神器yakit之web fuzzer功能

前言 yakit并不像burp一样单独设置爆破模块,但是yakit也是可以爆破的,并且更好用(个人感觉)。 手工测试场景中需要渗透人员对报文进行反复的发送畸形或者特定的payload进行查看服务器的反馈并以此来进行下一步的判断。 Fuzz标签便…

Verilog基础:强度建模(二)

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 三、拥有单个强度和确定值的net型信号的线与组合(线网多驱动) 首先来说明一下什么叫信号拥有单个强度和确定值,其实如果一个ne…

Vue中的日历组件 Calendar 实现 考勤打卡记录

日历组件 Calendar 可以自定义在页面添加内容。 实现效果图 1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释:this.$m(this.beginTime).format(…

Halcon 一维测量

文章目录 算子矩形算子弧形算子移动到新的参考点 Halcon 案例测量保险丝的宽度(边缘对测量)使用助手进行测量 halcon 案例获取芯片引脚的个数平均宽度距离,连续两个边缘的距离(measure_pos )halcon 定位测量Halcon 测量…

Java基础面试题-2day

面向对象 创建一个对象用什么运算符,对象实体和对象引用有什么不同? 创建对象使用new String A new String(); A即为对象引用,通过new运算符,创建String()类型的对象实体。 对象引用的存储位置在栈内存 对象实体的存储位置在堆…

【算法】使用优先级队列(堆)解决算法题(TopK等)(C++)

文章目录 1. 前言2. 算法题1046.最后一块石头的重量703.数据流中的第K大元素 2.5 如何选择大根堆 与 小根堆? 为什么选择大根堆(小根堆)?692.前K个高频单词295.数据流的中位数 1. 前言 我们知道:优先级队列是一种常用…

Maven 基础安装配置及使用

大家好我是苏麟 , 今天聊聊Maven . Maven Maven , 是Apache公司下基于Java开发的开源项目 . 我们构建一个项目需要用到很多第三方的类库,需要引入大量的jar包。一个项目Jar包的数量之多往往让我们瞠目结舌,并且Jar包之间的关系错综复杂,一…