首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用PDF.js异步加载多个pdf文件时获取总页面的页数

PDF.js是一个开源的JavaScript库,用于在Web浏览器中渲染PDF文档。当需要异步加载多个PDF文件并获取总页面的页数时,可以按照以下步骤进行操作:

  1. 引入PDF.js库:在HTML文件中引入PDF.js库的脚本文件,可以通过以下方式引入:
代码语言:txt
复制
<script src="pdf.js"></script>
  1. 创建一个PDF文档加载任务列表:使用PDF.js提供的PDFDocumentProxy对象,创建一个包含所有PDF文档加载任务的数组。
  2. 加载PDF文档:使用PDFJS.getDocument()方法加载每个PDF文档,并将返回的PDFDocumentProxy对象添加到加载任务列表中。可以使用Promise.all()方法来等待所有PDF文档加载完成。
代码语言:txt
复制
var pdfUrls = ["pdf1.pdf", "pdf2.pdf", "pdf3.pdf"];
var pdfTasks = [];

pdfUrls.forEach(function(url) {
  var task = PDFJS.getDocument(url);
  pdfTasks.push(task);
});

Promise.all(pdfTasks).then(function(documents) {
  // 所有PDF文档加载完成
  var totalPages = 0;

  documents.forEach(function(doc) {
    totalPages += doc.numPages;
  });

  console.log("总页数:" + totalPages);
}).catch(function(error) {
  console.error("加载PDF文档出错:" + error);
});

在上述代码中,pdfUrls数组包含了要加载的PDF文件的URL。通过循环遍历pdfUrls数组,使用PDFJS.getDocument()方法加载每个PDF文档,并将返回的PDFDocumentProxy对象添加到pdfTasks数组中。

使用Promise.all()方法等待所有PDF文档加载完成后,可以遍历documents数组,获取每个PDF文档的页数,并累加得到总页数。

这样,就可以通过异步加载多个PDF文件并获取总页面的页数了。

推荐的腾讯云相关产品:腾讯云对象存储(COS)可以用于存储和管理PDF文件,提供高可靠性和可扩展性。您可以通过以下链接了解更多信息:

请注意,以上答案仅供参考,具体的实现方式可能因应用场景和需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

超详细的vue3使用pdfjs教程

pdfjs,主要包括以下内容: 单pdf加载pdf加载 pdf放大/缩小/大小重置 pdf分页展示以及上下翻页 pdf添加水印 动态添加pdf 从服务端获取pdf文件 参考资料: pdfjs源码及使用文档...2.3 pdf文件展示(单 pdfjs的使用主要涉及到2个方法,分别是loadFile() 和 renderPage() loadFile() 主要用来加载pdf文件,其实现如下: loadFile...pdf文件流 this.pdfPages = this.pdfDoc.numPages // 获取pdf文件页数 this....renderPage方法首先获取template中的canvas元素,然后从pdf文件中解析出第 num 的内容,将pdf文件的内容渲染到canvas画布上。...那么多pdf只需要先根据pdf文档的页数,生成多个canvas画布,然后在渲染pdf文件的时候,只需要根据num去获取对应的 canvas 画布和对应的pdf文件内容,将pdf内容渲染到canvas上就可以了

13.3K42

组件分享之前端组件——基于pdf.js在线预览PDF文件

组件分享之前端组件——基于pdf.js在线预览PDF文件 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件...交互式示例 带有文档加载错误 处理的 Hello World 该示例演示了如何使用 Promise 来处理加载过程中的错误。它还演示了如何等待页面加载和 呈现。...'; // 通过标签加载,创建访问PDF.js导出的快捷方式。...pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; // 异步下载PDF...'PDF loaded'); // 获取第一 var pageNumber = 1; pdf.getPage(pageNumber).then(function(page) {

4.9K20

PDF.js实现个性化PDF渲染(文本复制)

主要包括: 基础功能集成 使用Text-Layers渲染 什么是PDF.JS PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件...基础功能有两个必须引用的文件pdf.js pdf.worker.js 如果使用CDN的方式,直接引用如下对应文件即可: https://mozilla.github.io/pdf... https:...PDF.js的API都会返回一个Promise,使得我们可以优雅的处理异步操作。...我们来分析一下使用到的函数: getDocument():用于异步获取PDf文档,发送多个Ajax请求以块的形式下载文档。...它返回一个Promise,该Promise的成功回调传递一个对象,该对象包含PDF文档的信息,该回调中的代码将在完成PDf文档获取执行。 getPage():用于获取PDF文档中的各个页面。

9.9K53

基于 PHP 实现的微信小程序 pdf 文件的预览服务

这样写问题很明显,pdf 文件小的话还可以,当 pdf 文件很大的时候,加载速度就会很慢。而且我只是需要预览单纯的前几页而已,也要把所有的文档缓存下来,在文件资源管理器中打开。体验非常不好。...探索过程 方案一:使用小程序的 webview,在网页中实现预览。体验还是可以的,但是遇到的问题是 跨域问题无法解决。 方案二:pdf.js。网上很多方案说是用这个,在服务器上写个静态页面进行预览。...pdf.js 文档比较难啃,各种兼容性,未知问题无法预知。 方案三:pdf 文件转图片,小程序端只是加载相应的图片。这种方案最完美了,不过比较考研后端开发者。我们的后端嫌麻烦,不给我整,无奈。...实现思路 将要预览的 pdf 文件的链接,跟要预览的页数传递给后端。后端根据传递的参数去解析 pdf 文件,并把需要的那一返回为图片即可。...通过参数 p 指定相应的页数以后,左边就能显示出相对应页数的图片了。

1.9K20

React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能

本次教程中使用的技术栈 Vite React Typescript pdf.js 快速搭建项目 > yarn create vite pdf-preview --template react-ts 现在我们安装下...url' pdf.GlobalWorkerOptions.workerSrc = pdfWorker; 这是因为pdf的交互容易堵塞JS,所以 pdf.js 使用了 web worker 技术优化了性能...获取对应页面的内容 使用 canvas 绘制当前页面 扩展阅读:《顶级开源 react ui 组件库测评推荐》 渲染整个 PDF 并翻页 - React 开发预览组件 想渲染全部页面其实很简单,按照上面的思路...,获取页数,直接循环渲染就好了 import * as pdf from 'pdfjs-dist' import pdfWorker from 'pdfjs-dist/build/pdf.worker.js...scrollIntoView({ behavior: 'smooth' }) } 再来实现下滚动位置自动高亮页数 本质上是使用 IntersectionObserver api 来完成,监听每个页面的可见性

4.8K20

​Python 操作pdf(pdfplumber读取PDF写入Exce)

您可以使用此方法刷新缓存并释放内存。1.2 常用操作PDF是Portable Document Format的缩写,这类文件通常使用.pdf作为其扩展名。...1.读取pdf文档信息2.输出页数3.读取第一宽度、高度等信息4.读取文本第一加载pdf pdfplumber.open( "路径/文件名. pdf".pas sword="test "laparams.... six的布局引擎,请传递laparams关键字参数1.2.1 Python读取pdf文件案例pdf文件如下1.2.2 Python读取pdf文件代码import pdfplumber# 加载pdfpath...(pdf) print(type(pdf)) # 读取pdf文档信息 print("pdf文档信息:", pdf.metadata) # 输出页数 print("pdf文档页数...文档页数: 2pdf页码: 1pdf宽: 595.25pdf高: 841.85姓名 年龄 性别 地址 学习技能张三 20 女 北京 python李四 25 男 深圳 java赵五 28 男 上海

36710

在python中有多个对应的库可以操作Pdf文件,其中最常用的是Pypdf2

在python中有多个对应的库可以操作Pdf文件,其中最常用的是Pypdf2PyPDF是一个操作pdf的模块,现在最常用的版本是PyPDF2;需要注意的是,这个库不能操作pdf获取文字信息PyPDF2介绍...PyPDF2PyPdf2中有两个模块,分别是:读取库 PDFFileReader操作库 PdfFileWriter1、使用PDFFileReader可以获取pdf文件的基本信息,还可以获取到每一pdf...对象,传入文件路径infomation = pdf.getDocumentInfo() #获取文档信息number_of_pages = pdf.getNumPages() #获取页数完整实例代码如下...= pdf.getNumPages() #获取页数txt = f'''{input_path} information:Author : {infomation.author},Creator :...','wb'))3、重要的概念PageObject:在PdfFileReader加载pdf文件后,获取的每一都会被转换为PageObject对象,对于Pdf的操作,实际就是在操作PageObject对象

82610

终极解决远程预览pdf问题

pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。...pdf.js绝对是我们的首选 本地预览 在pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...远程加载(跨域) 通过上面我们很轻松在实际项目中实现pdf的预览。但是这样的预览存在一个问题。我们分布式项目中往往资源服务和业务服务不在同一台服务器上。这个时候我们在对文件进行预览就跨域操作了。...遇到这个问题我想当然的将上面的a.pdf 换成了我们远程pdf地址了。 首先看看我们的远程文件是否正常 然后再看看我们的代码修改是否正常 所有的就绪后,我很高兴的刷新了demo2的页面并进行了操作。...报错了 报错大概的意思就是文件没找到。为什么没找到是因为我们的文件是远程文件pdf.js跨域了。在网上找了很多答案。有的说是在web.xml配置放置跨域的操作。测试无效。

37710

Webview加载pdf遇到的一些坑及解决方法

经过多方对比,使用webview加载pdf的方案更符合大多数的场景。 以下就会从webview加载pdf的方案出发,描述在开发所涉及到的问题点。 我的爬坑之旅开始了!...其实有个非常强大的第三方库pdf.js[2]已经帮我们处理好了,pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDocument(url/buffer...只不过它的使用有点麻烦,需要先将pdf.js下载出来,下载地址[3] ,copy到Android项目中assert文件夹中, 最后加载方式还是和上方一样使用webview来加载。...当我们使用pdf.js默认加载pdf,会发现效果图的上方出现了多余的控制按钮,比如下图: 但是在UI设计图中,是没有包含这些控制按钮的,如果就这么提交,估计不一会UI小姐姐就来找我了。...其实在本篇一开始使用的方式中,加载完成pdf是没有这些控制按钮的,那么问题来了,我们是不是可以将第一种方式与pdf.js相结合,来进行加载

8.2K30

Android 上显示 PDF 文件

/ 我是选择了 pdf.js 这个库,使用 WebView 配合 H5 页面,可以做到随意的自定义,并且体积很小,放在服务器的话就更小了。...使用资源:https://github.com/mozilla/pdf.js 版本 版本是 2.3.200 在这里记录下使用的过程也方便后来者。.../libraries/pdf.js https://unpkg.com/pdfjs-dist/ 刚开始使用时,直接使用提供的 API 创建 canvas ,每一创建一个 canvas 然后排列下来,因为有其他的内容要显示...因为是在加载完成后,每页都创建一个 canvas 显示,没有做到逐页加载,也没有做任何循环使用和销毁的处理,内存就爆了。...在 pdf.js 的例子里看到了在手机上使用的例子,就改了改,它这个做到了循环使用 canvas,并且是逐页加载。 修改之后在手机上使用 32M 的文件轻松无压力。示例,传送门 ?

2.3K30

pdf.js分片加载、分段加载golang beego

开始以为文件流就是分片下载,其实不是。 旧版的pdf.js好像不需要设置,自动就是支持分片加载的。...40M的文件测试一下,效果如下: 相关知识: 实现过pdf.js默认一次性加载所有page,加载整个pdf - 53BK报刊网 pdf.js的一些参数: initialData TypedArray...由扩展使用,因为在切换到范围请求之前已经加载了一些数据。 disableRange 布尔 (可选)禁用PDF文件的范围请求加载。启用后,如果服务器支持部分内容请求,则将以块的形式提取PDF。...disableAutoFetch 布尔 (可选)禁用PDF文件数据的预取。启用范围请求后,即使不需要显示当前页面,PDF.js也会自动继续获取更多数据。默认值为“false”。...实现过pdf.js默认一次性加载所有page,加载整个pdf disableRange设为 true 即可 这样可以pdf.js可以实现pdf文件页码的自动选择(不重复加载pdf文件) pdfjs优化,

20.3K20

pdf.js使用方法「建议收藏」

供大家参考借鉴 pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用, 呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路...猜想如果可以改变默认72DPI就可改变呈现的清晰度 上面是最开始探索 pdf.js 使用的方法 的猜想 其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤 一....使用 pdf.js 显示 pdf 文件 1.打开浏览器 新建一个 标签 输入 你的项目服务器 地址 这里我用我的服务器 地址进行演示 10.0.0.5 2.当 你访问 项目 服务器 根目录(10.0.0.5...) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了 3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示...github 上的pdf.js 使用方法 点我下载PDFViewer; 使用方法都在 README.md 文件中 如果不了解gitHub的同学请往下看: 点我下载会跳到这个页面 2.点击页面上绿色按钮

13.1K20

动态提取PDF内容的终极秘籍!兼一个超强网站推荐!| PA重要资源

比如,很多企业的pdf报告,前面包含数据的页面不固定,但最后几页,嘿嘿,都是一些例行的备注说明,这样,我们要动态地去取前面的数据页面,最关键的是能获取到整个pdf报告的页数。...把多个PDF的不同页面组合成一个新的PDF文档(将one.pdf的前7,two.pdf的前5,one.pdf的第8按先后顺序合并成combined.pdf) pdftk A=one.pdf B=...输出结果如下: - 3 - 回到本文开始所提问题的关键点——获取PDF文件页数,我们就可以在Power Automate中调用pdftk工具来实现。...通过上面的步骤得到pdf文件信息后,我们接下来先用比较基础的文本拆分方法从pdf信息中分离出pdf文件页数,以后我们再讲其他更加方便的方法(但涉及到正则、或其他dos命令用法)。...pdf文档内容写入文本文件 - 4 - 通过上面的简单步骤,我们获取pdf文件页数,然后按“页数-5”的方式完成了既定的目标。

1.2K10

解决Android的WebView无法打开PDF的方案

所以IOS的WebView可以打开带有.pdf后缀的文件,并提供内置的PDF查看器,使用户可以直接再应用中查看PDF文件。...对于没有.pdf后缀的文件,IOS仍可以预览并打开,因为IOS系统的预览功能会自动识别文件类型,并使用适当的预览器打开文件 。...这里我主要针对无.pdf后缀的,H5利用Canvas和PDF.js,给一下我开发的解决方法。不过我也会将我收集到的安卓的方案写这里,不过我不是安卓开发工程师,欢迎补充。...这些库可以在WebView中渲染和打开PDF文件使用其他应用程序:(通过使用Inteynt机制?),可以调用系统中预装的PDF阅读器应用程序或其他支持PDF的应用程序来打开和预览PDF文件。...例如,使用封装pdf的应用程序,如Adobe Acrobat Reader或其他PDF阅读器应用程序H5使用pdf.js利用Canvas将页面渲染出来引入PDF.js(注意如果要下载下来使用的化, pdf.worker.min.js

2.7K40
领券