试用Foxit PDF: 在网页中单页展示PDF

产品需求

在网页中展示PDF文件,每次展示一页,通过按钮进行翻页。

思路分析

之前网站功能分别使用vue-pdf和pdfjs-dist实现过,但渲染速度都特别慢,所以想试试foxit pdf插件。网站只是用插件单页展示PDF文件,功能简单,在官网提供的插件包里也有只渲染单页的示例代码,稍加改动后即可使用,但实施过程中发现有许多坑,于是想找官方文档,费了好一番功夫才找到一个中文文档,但发现里面也没有详细的参数配置说明,所以只能自行摸索。

过程经历

问题1

根据项目需求,让PDF的宽度撑满父盒子是比较理想的,而在PDFViewer的配置项中有一个defaultScale字段,是与PDF的显示尺寸相关的。defaultScale的取值为数字或字符串,因为没有明确的官方说明,所以只能试,已知的可取值为:fitWidth(默认值)、fitHeight、数字(缩放比例)。

其中fitWidth比较符合需求,但实际操作时,当取值fitWidth(fitHeight也是)时,页面总是会出现滚动条。

从控制台可看到html上有一个"--facing-margin: 8px;",如果在控制台将该样式去除(或将主dom元素display设为block)则滚动条会符合预期,于是做了如下尝试:

1)新增CSS样式,将--facing-margin覆盖为0px,发现问题依旧;

2)直接在库代码中(js文件和css文件中各一处)将--facing-margin值改为0px,发现问题依旧;

3)将主dom元素display设为block,问题依旧;

4)将比例调小(比如将defaultScale设为0.95),可解决问题,但取值不好控制;

5)在上面的测试过程中,发现将--facing-margin改为0px后,再触发滚动事件后,可以触发页面重新计算,这时滚动条会变得符合预期。所以在PDF文件加载完成后用代码触发滚动事件,问题解决。

问题2

当将调整后的Demo代码移植到实际项目以后,PDF计算后的尺寸并非是父盒子的宽度,而是网页视窗窗口的宽度。又因为PDF的父盒子大小与视窗大小没有固定的比例关系,所以考虑将PDF的显示放在一个单独页面中,再用iframe嵌入网页中进行使用。

不过,这样做的话,iframe的高度不会根据内容去自动调整,所以只能人为调整。此处使用的方案是:iframe打开PDF文件后,通过postMessage将PDF的尺寸信息和页码总数发给外层窗口,外层收到尺寸信息后再修改iframe的高度。

问题3

将iframe嵌入网页后,当PDF翻页时,发现iframe时而有滚动条时而没有,时而PDF是撑满网页的,时而又与边框存在间隙。

在控制台可以看到PDF的尺寸闪烁是因为每次翻页时都会重新计算宽度,而当某次因为某些原因产生滚动条后,滚动条会压缩网页的有效宽度,那么下次翻页时计算的宽度就会偏小,于是又会出现间隙(如图所示,间隙大约8px,默认的滚动条宽16px,所以大体可以猜到原因)。

解决办法是直接在iframe网页中将html的overflow直接设为hidden,这样就可以避开滚动条对尺寸计算产生的影响。那这样改了以后会不会影响上一步postMessage中的PDF高度尺寸呢?实测的结果是不会。如下图所示,overflow:hidden不会影响scrollHeight等信息(图片中的渲染效果是在控制台人为修改的,非浏览器自动渲染,正常的页面高度不会缺损)。

最终结果

初始化时,因为要下载PDF文件,速度慢些;之后的操作还是比较流畅的,效果还可以。

相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者3 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人7 小时前
前端知识补充—CSS
前端·css