试用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文件,速度慢些;之后的操作还是比较流畅的,效果还可以。

相关推荐
zhougl99630 分钟前
html处理Base文件流
linux·前端·html
花花鱼33 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_36 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法