使用pdf.js遇到的问题及解决方案

目的：1.实现pdf预览 2.实现预览指定页码pdf 3.实现监听pdf的页码变化的值

引用了PDF.js，地址github链接https://github.com/mozilla/pdf.js

第一步第二步有借用原文链接 https://blog.csdn.net/weixin_34409357/article/details/88495734

第三步实现有参照原文链接https://blog.csdn.net/hjxdreamer/article/details/86082656，但是发现不能页码结果不准确，于是自己在源码中找到了更好的方式、位置。

使用步骤及实现步骤：

需要修改、扩展的文件 PDF.js--->web--->viewer.html与viewer.js
我选择了iframe实现，还有其它方式，可以进github仔细阅读

file后面是你的pbf路径，我是本地测试了一个css.psf

page后面可以你指定的页码page

zoom是放大倍数
<iframe style="width: 100%;min-height: 70vh;"  src="/static/plugin/PDF.js/web/viewer.html?file=/static/plugin/CSS.pdf&page='+page+'&zoom=2"></iframe>
在viewer.js内找到代码段

if (!this.pdfViewer.currentScaleValue) {

this.pdfViewer.currentScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;

}在后面加上下面的代码，实现跳转指定页码
// 扩展  传入pagevar c_url=window.location.href;if(c_url.indexOf("&")&&c_url.indexOf("=")){var c_urlArray={}var c_val=c_url.split('?')[1];var c_valArray=c_val.split('&');for(let i=0;i<c_valArray.length;i++){let c_key=c_valArray[i].split('=')[0];let c_value=c_valArray[i].split('=')[1];c_urlArray[c_key]=c_value;}if(c_urlArray['zoom']){this.pdfViewer.currentScale=c_urlArray['zoom'];}if(c_urlArray['page']){document.getElementById('pageNumber').value = this.pdfViewer.currentPageNumber = c_urlArray['page']*1;}if(c_urlArray['top']){document.getElementById('viewerContainer').scrollTop=document.getElementById('viewerContainer').scrollTop+c_urlArray['top']*1;}}
实现监听pdf的页码变化的值

在viewer.html 末尾写一个函数接收页码值及回调函数传值父页面
 <script>function getCurrentPageNum(value){window.parent.page_return_call( value );}</script>
在viewer.js内找到代码段 _this._currentPageNumber = evt.pageNumber; 在后面加上
 // console.log(evt.pageNumber,'这是变化的页码');getCurrentPageNum(evt.pageNumber)
在你放置ifram的父页面定义回调函数，可以获取当前pdf跳转后的页码
// 回调pdf内变化的 页码
function page_return_call(pageNum){// pageNum  当前pdf页码
}
以上是在使用pdf.js做项目的总结，转载请带上我的原文链接，谢谢，码字不易。

使用pdf.js遇到的问题及解决方案相关推荐

pdf在线预览解决方案——pdf.js使用
业务背景在C端的前端项目中,针对用户会有多种规则需要展示,之前的处理方案是将这些规则写成一个个的静态页面,用户来访问这些页面.但如果这些规则需要变更的话,就需要前端修改对应的规则页面的文案,重新发版 ...
PDF.js 预览pdf文件流预览pdf，及ie浏览器兼容性问题，解决方案！！（开发笔记）
一. 官网下载pdf.js :Getting Started 注意: 这俩包都不支持ie,因为用的是es6,ie解析不出来下完以后引进去.下面为省事找几个市面上常用的方法: 1.文件流转base ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
判断网页pdf还是html,html5 – 如何知道PDF.JS是否完成渲染？
我使用PDF.JS将pdf页面呈现到不同的画布元素中.我的要求是捕获画布的输出并将其显示为图像.是否有一些事件知道画布中的pdf页面的渲染是否已经完成.因为当我尝试捕获canvas的输出时,它是空白的 ...
pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
pdf在html网页中打开是乱码,pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
Android中显示PDF的问题解决(安卓端使用pdf.js CDN模式)
前言:昨天接到一个需求,需要在Android端展示一个PDF文件,IOS那边很方便,只需要使用WebView即可,而安卓就不行,也查阅了部分资料,接下来我将解决问题的过程和最终采用的方案记录下来. 评 ...
PDF.js 实现pdf分页加载的前端优化(实现按需加载)-前端的demo也已经上传
描述 pdf.js实现了分片加载,但是在首次加载时自动加载了全部的pdf分片,导致打开了几个超过1g的pdf时,浏览器报出内存不足的提示解决方案实现pdf.js的按需加载,只需要修改属性disab ...
服务器上引用不了js文件,pdf.js不通过服务器如何像普通js文件引入使用
之前有点忙,现在来补充一下这个问题的解决方案: 由于发现在苹果手机的微信直接打来非常流畅,所以在苹果手机的微信打开服务器上的pdf时,不采用pdf.js,直接打开,这个解决方案是针对安卓手机在微信打开 ...

使用pdf.js遇到的问题及解决方案

目的：1.实现pdf预览 2.实现预览指定页码pdf 3.实现监听pdf的页码变化的值

需要修改、扩展的文件 PDF.js--->web--->viewer.html与viewer.js

我选择了iframe实现，还有其它方式，可以进github仔细阅读

在viewer.js内找到代码段

实现监听pdf的页码变化的值

使用pdf.js遇到的问题及解决方案相关推荐

最新文章

热门文章